{"_id":"@bodiless/youtube","_rev":"479-07d7208d36d32b818ee144410194f6f1","name":"@bodiless/youtube","dist-tags":{"latest":"1.0.0-rc.23","ks-canary":"0.3.7-ks-canary.62","upgrade-deps":"0.3.8-upgrade-deps.173","canary-1553":"1.0.0-canary-1553-54.0","canary-1636":"1.0.0-canary-1636-9.0","canary-1487":"1.0.0-canary-1487-289.0","canary-1641":"1.0.0-canary-1641-17.0","canary-1500":"1.0.0-canary-1500-184.0","canary-1645":"1.0.0-canary-1645-24.0","canary-1646":"1.0.0-canary-1646-25.0","canary-1647":"1.0.0-canary-1647-481.0","canary-1648":"1.0.0-canary-1648-27.0","canary-1598":"1.0.0-canary-1598-28.0","canary-1650":"1.0.0-canary-1650-29.0","canary-1635":"1.0.0-canary-1635-203.0","canary-1652":"1.0.0-canary-1652-31.0","canary-1661":"1.0.0-canary-1661-36.0","canary-1667":"1.0.0-canary-1667-57.0","canary-1497":"1.0.0-canary-1497-45.0","canary-1679":"1.0.0-canary-1679-53.0","canary-1682":"1.0.0-canary-1682-65.0","canary-1683":"1.0.0-canary-1683-269.0","next":"1.0.0-rc.42","canary-1680":"1.0.0-canary-1680-64.0","canary-1595":"1.0.0-canary-1595-120.0","canary-1685":"1.0.0-canary-1685-122.0","canary-1671":"1.0.0-canary-1671-144.0","canary-1730":"1.0.0-canary-1730-172.0","canary-1731":"1.0.0-canary-1731-70.0","canary-1733":"1.0.0-canary-1733-94.0","canary-1628":"1.0.0-canary-1628-256.0","canary-1734":"1.0.0-canary-1734-83.0","canary-1735":"1.0.0-canary-1735-78.0","canary-1771":"1.0.0-canary-1771-259.0","canary-1772":"1.0.0-canary-1772-87.0","canary-1774":"1.0.0-canary-1774-127.0","canary-1773":"1.0.0-canary-1773-90.0","canary-1775":"1.0.0-canary-1775-187.0","canary-1776":"1.0.0-canary-1776-163.0","canary-1778":"1.0.0-canary-1778-291.0","canary-1482":"1.0.0-canary-1482-266.0","canary-1779":"1.0.0-canary-1779-170.0","canary-1780":"1.0.0-canary-1780-171.0","canary-1781":"1.0.0-canary-1781-235.0","canary-1782":"1.0.0-canary-1782-167.0","canary-1783":"1.0.0-canary-1783-181.0","canary-1784":"1.0.0-canary-1784-290.0","canary-1785":"1.0.0-canary-1785-281.0","canary-1786":"1.0.0-canary-1786-208.0","canary-1787":"1.0.0-canary-1787-408.0","canary-1788":"1.0.0-canary-1788-221.0","canary-1790":"1.0.0-canary-1790-247.0","canary-1792":"1.0.0-canary-1792-272.0","canary-1529":"1.0.0-canary-1529-229.0","canary-1794":"1.0.0-canary-1794-282.0","canary-1795":"1.0.0-canary-1795-240.0","canary-1797":"1.0.0-canary-1797-264.0","canary-1798":"1.0.0-canary-1798-267.0","canary-1799":"1.0.0-canary-1799-274.0","canary-1800":"1.0.0-canary-1800-284.0","canary-1801":"1.0.0-canary-1801-287.0","canary-1911":"1.0.0-canary-1911-497.0","canary-1914":"1.0.0-canary-1914-543.0","canary-1916":"1.0.0-canary-1916-551.0","canary-1934":"1.0.0-canary-1934-572.0","canary-1956":"1.0.0-canary-1956-657.0","canary-1952":"1.0.0-canary-1952-688.0","canary-1937":"1.0.0-canary-1937-717.0","canary-1964":"1.0.0-canary-1964-716.0","canary-1991":"1.0.0-canary-1991-1018.0","canary-1955":"1.0.0-canary-1955-936.0","canary-2020":"1.0.0-canary-2020-993.0","canary-2033":"1.0.0-canary-2033-1122.0.bff6645","canary-2035":"1.0.0-canary-2035-1035.0.95b4a03","canary-2037":"1.0.0-canary-2037-1042.0.b8ea86a","canary-2040":"1.0.0-canary-2040-1089.0.ac009c0","canary-2074":"1.0.0-canary-2074-1129.0.d4a1eb8","canary-2055":"1.0.0-canary-2055-1417.0.6188e93","canary-2110":"1.0.0-canary-2110-1292.0.5240c8b"},"versions":{"0.2.0":{"name":"@bodiless/youtube","version":"0.2.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.0","@bodiless/core":"^0.2.0","@bodiless/fclasses":"^0.2.0","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"c2817380b88e3108e72fdaf5cd7a5ea19d4e1c56","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.0","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-PvVE6Co7Ihx4qXILlqSqM9sbqXl1dxFozyWWhEhtpNDKWCnUjFOoe8ayRAS21BJC5dJkbYM4VuWqykj5b+ZN3w==","shasum":"4e65ec53b90bce84bed67e42e6ccff7a917a6989","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.0.tgz","fileCount":20,"unpackedSize":59669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiZiaCRA9TVsSAnZWagAAL/kQAJdXU9Y4orSbbTY+2M/5\nulx9DBG8Tc/+Xz/7LzTljBg3Kop9RlfMfMjCd97Z7+tdJzqSq/larnsm0PsY\nnTVynL9s+/rks0yW6o7blR2SAVT8Jr4vyI9GZ7kWjnuTBHXJ/gag+3EK3Zyq\nPytyya59597fkHe63BFl752rbBkePwR2UliJxrFJTXVDtr7ITaw4OcTf+aDv\nTJZXegKMmjJrFPzmlw2VULd6Q+L/V6smh8RYV3WGu+dfqUL2/n/PkuNxNooB\nmyMa45vXPZwQ0dK+vM2Y/AIYu5FV24P+dLVJlidRVlNl8jHkjNsiJ4hN/dw9\nzgw+ZMktA8rSSoLyMyxVZTD1QfZ1PtEPBmd9OkG6Pv9hlSyeEQYXE/JQ+Nal\nqJgWXi1nxOlt2J+JAL8BhqJqtZ2E2STuhCK2mfVf7fW45ZWb+BcgM8E8lldG\nvrKy9+W/dIr2OrwVtuNTKwP9V2bHnYGpqF+AXjU/9aZdZ9dKiKgt151PrhnD\nDZXSNVstUrl45XOny1dLCH7Oe/9UQ9HOLrpqI2OVDASXLio+uaJJhytzkCDS\n3dRRhpMzGUZeXK0rmYWAOXG/PQ9i1TG5JtRWNVD0hUjkb/uEZURGb7C1Di+w\n8UvVWrU444DZ2B9xWZJwLqtX1ruoAgYM1YFD6Y9GRHo1SPGvM7UXK1Ukh0OD\ndiC/\r\n=a+Cg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEF7SflHClMXylQLIkL4ZT31ZDla+p19GpQIZmwyr63SAiEAvNX2zcoIw6AdlbjIyFmE6llsgNbujve1NVtOJ/xtW/s="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.0_1619630234293_0.35612488563656264"},"_hasShrinkwrap":false},"0.2.1":{"name":"@bodiless/youtube","version":"0.2.1","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.1","@bodiless/core":"^0.2.1","@bodiless/fclasses":"^0.2.1","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"c7dc18c92bb8be0e63436e93ab58a9ecb63e9ec9","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.1","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-2U1iZgC1BNY+Ua0hQz2jQ4BDl8TEN9Ermm1jrjVbxctuEqnG6ODFaqXb+ex17Vvf6M3TmWMUNaSGDxV/MoomYw==","shasum":"7eda14864581124ecb11d147e1580a5bdeda75ed","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.1.tgz","fileCount":21,"unpackedSize":60475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgm/QFCRA9TVsSAnZWagAAN0UP/1VOfpumdG2Wpe4bmshn\nuLrzAcBz71eOEiUWuRpI3b32UpotC0Oq8zBgHtmj0rUjRIEjgk9h9PsgBg7E\nvYpPXLxvanP5KbkSPntyy7bH9E1a1r91N33vD0KvDVUnPQqCxxFXO38ANBmv\nplpoQ0CRPmmyR8ALXu9YLSity7Ol0jRp4EGw0kaOs+xIB0TI3JNUytUYbxc6\nx43udOG/RPgI2nMVKuC5H56aL6YX49RsgemPIO0z5HTQBVqcBeZnlJh6HLi/\njoMSkqV4JoijXeINMEEC+h+BPmwnyYIPyXf4VhOeH4Zcs1ylknL61TEjNoie\nEiimg24Rc8sEoO3vAdx23jtPKg0YpWSw6afQukBOdCO+g3vDgPN6w/37hsZA\nDhyEUVjVklJwpWyVF0pkaY+O+qEQUIBEaKZKMpOff8yV2I4Z+24IrQXHS9Aa\n1WIiz0VbsHGYS05eQa+Iw1B9Rd9wGY7nOo7yji0jgdTdJpo+KPOHMI+JDetg\nKDOcv2pDhw0/fiXnUiKQZaCae6PRafauRlrS9tmjwasUSjqKOLUw14VcoAhx\nJ1laoL3jQGu5B2fnplyE2+Q/KRlWvOUWR+FiSbexiTOpsMwMld1jYEAEcgGs\nyc2soV3sTC91aXaBq9igyLovGelHT9rZmB0a/ReJTtfeRztwvTot7UqmZIPy\non5g\r\n=Ri60\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2zNUbLLIKHOdbMWKnORFyqqIJmYai4kI6c6KOKvouSAiEAlwn0obC05z18TInR+RnIA/xDr6mUnJULe41jr2lrVkA="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.1_1620833284953_0.5716411426686459"},"_hasShrinkwrap":false},"0.2.2":{"name":"@bodiless/youtube","version":"0.2.2","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.2","@bodiless/core":"^0.2.2","@bodiless/fclasses":"^0.2.2","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"16eb7be4756109cea5fb5cb7ea67b91f32b9c353","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.2","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-8wZchIHLAqiPNETtsvzxPoCGvCU1egUKLrVCXy+fVpKee0F7KtQtxFWh3v78zzWayH4wOnKFRBo81eKvVbL4Nw==","shasum":"67d327e8e63e4e7cadc1a11c69f4fd38f0d31a42","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.2.tgz","fileCount":21,"unpackedSize":60637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5pSCRA9TVsSAnZWagAAIkoP/RB7tiPApKmFKYJMUAeU\nEXK3yq3+LcZAanfBFNg7G2exthOHYmrvQnM5bybVgfo02SK8IdLs6FEc+WED\nw/0CSlqRmKQwGy3UG14oKurX2xZ7X13a0/VPokoJNQjd0TCa6AAcJosoKEFG\niJzul2W1atbPq+Sc2/QKcdyHuCKEqn1hZmX4krcWEB+vDoYnjP7qvEtWGKes\n+HMOOqA1Bvu81SyEBLDS85V6etEEeo2objkyUxukIx2AXa7gBzJvwb20NjRE\n03hf3Y8SXAQrmUVyN9EXhjitfG3x2fbvR7K9juIwVLtOa+b9CsQFu8+izm7A\nAJjIPtPRuAnYaeGvDX//3FsAZ3dPFsVQDPK6HNOQK2OJXxclJ2uxEs2RBfnh\nUcLPAgJXyX4MwfDRaI19FPy/GfJ4TsOuT1Ljx8UYebgM9kJkt0NL4/yew2JN\nRr5VoY6E68lqfxGO2Rk47kPKwmq6BVwx04j1WjTMNvTjnnnx/oXBoqr3lSeQ\ngAz/hiwWUJU0xgNH2RguUQqDfvWKDHdJ01oKaNhVp0u+FLUcqlkZSRFfmFgK\nLT+H6EjcevWZ9d2j39Ky+nrZqQ4mngjHEozNiBKMWnVgOYRkIBuQlWZcIYSw\n1tIMdcQ5shyef3y2baeKK8yEqwQSeR4/aQhEzN5GlkfD4HWuoOlYOibVNLM6\n3Cl3\r\n=9D/s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnZKG39HqxCARh7S4JLWYQR6Uen35voj4OhEr/VWSvXAIgeF7wFlkQF8v+gXKgeCMRdPpUuvE2d21ntDJ0Aq7JEjc="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.2_1623169618822_0.41973508191398556"},"_hasShrinkwrap":false},"0.2.3":{"name":"@bodiless/youtube","version":"0.2.3","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.3","@bodiless/core":"^0.2.3","@bodiless/fclasses":"^0.2.3","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"15bc6f63ea63e80c7d0a6d677334cb8d719382f0","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.3","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-KezZkjZPd233bvDgDc1MS/f/0ZIOcRTQLRxT7ln0cZ1d0FOSC8CemBKNm9BiMc8DWubHSy4FjaVz9FmSpb8g4g==","shasum":"0d513ff10b7a41d4d1e0baaf52107415aa8ca312","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.3.tgz","fileCount":21,"unpackedSize":60799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx2lRCRA9TVsSAnZWagAAhS8P/1dZ+0i90eCKCmMXhV9j\nMMSuwFPxPjw0vUjnsSTraKZEqcX/xEh9yeb4cMDVNI5DEX9LnBwRC0Zm2483\nbWZoeai1bQAIzfy94uLRy3w0p922pMPt9JHJS4K4Uw3Px5K2JW16685weoeV\n5e1DVmFswlKHppmZ+wwFh54EbDLwwVpjc32Z5lG0igYeHrWDsZrfFM1jt1dS\nSJ68M4VsJLqxNs3SjhWnMzb6wiaTORJjtn12OrcK48ePWnlTGsWvbkm8oVYY\nGCJXZ5PTZCZWWK/21pH/ixxVNJs+Rh3dQ6HJodaY6JZYV9uOh7/PhEeUct3E\nEjmX3k2e6sH3hZkzYuo/BIXPa3Zd/T7WnoH72/HqGh5AtaL0ZfAROlO7mMDL\nxeeCLtFmBj7/BCSfC0JUVumPJlbLouRPLmgw62zvHWISFV4BlLMBa5rFOOB2\nWSLQitOs4csgGhHHtXX7zMA8j/faMJ4Qep+477pZgF/1TKotyyDVfVEmfktd\nrh/nJg1mICxpF804Agx0KCZOuKQRMpnc3wBWPw1+9StEvLg37ZbOcTp2UEvS\nwCOOvwvctqUZdGEyEEyGt/pOfLmS1WEfPc4kSA7UTiPMRAPCKRM/aW1VoA4Y\nSdmTxGE6wSKTbQdce0onqWBUiFFPJK5jw2GCFFETJi8LDoyt9TWrDG55qEsT\nvrDK\r\n=4uos\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTQCXrNOGR6M/7QyzJ4i8ns88wF9/Is2PRYu3JfkfP7wIgQKe8+Zda0Qj3bpJBfwxk6qS35eNp1LtPGAw4hIJWLRM="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.3_1623681361698_0.3271597222238596"},"_hasShrinkwrap":false},"0.2.4":{"name":"@bodiless/youtube","version":"0.2.4","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.4","@bodiless/core":"^0.2.4","@bodiless/fclasses":"^0.2.4","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"1dbb4c3ea95ae03db1a944fffd524c895f21c88f","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.4","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-aJBcAuStxEwOEEOA1Aqsdszgdlv0PNhu/1ysRJhMqoWIxY26D7NrB6L0ZP0aW/ktHXIZ7sTiG5GDbuqi13MClw==","shasum":"8c1d45b759667c28772eff0cf8f0635f6d9ff4df","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.4.tgz","fileCount":21,"unpackedSize":60961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3y0QCRA9TVsSAnZWagAA1DYQAJ4L3VtHjF7wc83Pc2xl\nMbq2RinMRW7T1jDJ59+z8ckcRXbaoRWU9Kk7/lYYXYCwqtshMgKQvdYnkcJV\nWwmjyrdLnWvSAm+cGKoyt4/HmIz1a/SL8bFJuVqCrVeBO16xs8/bRIqYOdXP\n7hJL80svR9VPs+4MI7bphdiRbVT4Oi8mPC3GViVOEJANetuNKzte2WjrTsCC\noJ54fTYdnnu+dhu49BQdCfD6+0isDiRGcjrf3eCVhtme2d4cXh9Qd+c1dy6Q\nVQtNhGqCQ7w1JJRMPBDNU8NN2iizBHr47Y6pgbM27najs4z795sIKjXXYTWh\nXRw7Or4m6WaGOa4W0xIGOpnd4Y04F2XJSXeF7Z6+rtsMpmQ3xL9LYauZjIvw\nbQ3ltxHijusMQPqtHuzJ/dCXYYtAQKlkyd2lp9tWUHabPIuHTHzUidF6m5db\niVDH7ibztDN28cpUm3Wz8nLcbfHSXv2AC5J569k41tYY9wSNQSaxle3zPJD/\neoQoEwpCH9VQpyI9dx1/V+ufkKGbCtgjuUpX8nHqRqKV7Z7cmabuhhzePl9d\nxG9Oy12ixi/EfW7YSbgI6qpcPubfxxhWB9izcJ/7fbUBB0N+niiYRg1ym/he\nITx1N837MB1mDArFSmmoI1T7SEuw9PliWD0xRgeRdBR+JPt+XGNv5oZFFPbH\nIXoy\r\n=4A/o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZexCtpUHC78JBv3BWK6YlvsWwtxBJP0ZPEWI5MprxfwIgfUr8rsiT2KrQuTDqx+LhrCprug1+mxr1rqmdSzaw/wg="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.4_1625238800001_0.4710849837472517"},"_hasShrinkwrap":false},"0.2.5":{"name":"@bodiless/youtube","version":"0.2.5","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.5","@bodiless/core":"^0.2.5","@bodiless/fclasses":"^0.2.5","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"0ce3d1e2cdae93f86c685bceef7d3c8fa7e6a6d9","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.5","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-n9A3jKIQdQWs/tYPoLH3IqOG6c/mI775ceUsy8+o0UaW8l/1pBTaxCWmKbQ4ATS4peLbs9xf0BT2i0dUWbaXYA==","shasum":"dedaa2e73c6681a25ceffec21ddaa84e9b89708d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.5.tgz","fileCount":21,"unpackedSize":61123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8aF8CRA9TVsSAnZWagAATGMQAKEiwcMPuobt3roylt8t\nwcN/afrJyOVI9J6VlEM6Vu3sONheTWnKC0CnqDd47/ZX1zyiMRNPxbY70MzG\nxVATa6bNf/MatVyIEXFkQXrg4H1L0rPXuSvIGxgC+VwooSE8UeAiID2rVxqo\n7+mENf4FwKjInviPLShyNHUzsofOJ5pD79kbnCKUAxk86BG6kU/1LHItg7ZA\nhYfI88eacyKHFBA9aY8tKWEvaKAF24SArDZWjk6+KhPk9jZhjg/yHi2F7SKi\nvMx6avcFOaX8ZTZmrGSIgpRGN12YiEJu7VQEr8IMrVh9rYFIQyJzr/T8djTz\nd/VFSwuFK+7dSHO0jcCYY6vchAKprAoyOSYFzKx7qpF0GzmX9H84M+UoK6oS\nK/wtf4xGYweMPFgXRiKiEQXVp3d7QNoTsCxR2t7Dscp7FzbtqCRcPvkmHhOk\n3Dc/smcndblUZn07yfjN9nS4ug/QcxOIzxf4ggTc0c1tqJMwJCncCe8pvfJe\nD/iFT4GM1lnslhvbpVKe9EzK8aU/oQ4mMKNFEEqa+AQOnG4pbXTeKIt09W5X\nfWtZEwty1w8b7bF3J12RLojw5TvAVkDgdI4ShLth7yDlQhQLeyUPQe4NndOJ\n5xyectd3biLpkv8lZTOwLJX69dB83QVcYVyBQo2ajKE9C3rw0Pb92+5zC3ql\nFOjW\r\n=DeI3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7TieBpLM6QYYwIilvWL5QxrLxaizaqstEWqJzVfgEIwIgJlDIEunVU+ASr8/qvLZsF+29uufKYd8BuZ8QfGb4xik="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.5_1626448252636_0.7997182958282356"},"_hasShrinkwrap":false},"0.2.6":{"name":"@bodiless/youtube","version":"0.2.6","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.6","@bodiless/core":"^0.2.6","@bodiless/fclasses":"^0.2.6","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"97eeb9a9402df44e39bc3f562337bbeff18255ca","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.6","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-MA7ixL1jLtoulE+a/cTpCqx+mgQsmynoZX+2vtRG6NCiSRE1J1f+mAwmvh+j5Uu/wFmd28O395QcfVb9KuZI3Q==","shasum":"5eb7187ea334b1666522c536a18f66df04f63192","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.6.tgz","fileCount":21,"unpackedSize":61285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9u3MCRA9TVsSAnZWagAA7YgP/RTgBZPjNx8CYhQGqyV2\nxSzaoSbdA+YTLqAJ0OCqjiYpql7J/S3sZMX8ZLLFFCMUZj1PCuHFO2uTgGEr\n8DdRObcuvL7FNfjwbmUgYmi7/1t14Fb5zdmkYTceO5G40Ud9uNvqL8oH+Qdh\nJvlqdBu1o5bgqxCwQk43KvrDvyto/TpiSta/ixrRqunCR3gQ7TSXRb/IY3BK\nbU0PwYDfxtGWCx08GTIy84FCGNCQ3lwBwVWWZylZI0crFz1frqAmcBiN6eR2\nN6J1Le/Y9b7t70CT0oYadSvBQ8R0dIscqaahadFwZA09fmo5Ih4eTBN1s05+\nPFjTExxINcR+qZcwRp970VMJH36ffZ7O1pZU57OyDaUQz3kuTn1+qh600M4Z\nNAJOgOgTVOUC6hIN5SOTGXy9fr2bEuIZZ/tkot0x+vTH1Wr6of1q77ygLRWx\ncyZKBc7qKz7IX5Wzq8xD0MsY1RekkO+h0veQk/tJsEZOt2gDWmPtv1lbTvgP\nD5oPF34pIlp5G/7QGSkuZawpIHFNahbcyXHe4wcAQm0ufNJ+gmLIVZ5DBHD+\nfJi2wGiifGKBNoTO/i53hbtQJUiYMBG0evSC3chs7Ci6WEkHcbqRL0mLLoit\naIII9sSU84kOj2IBLlomUg1DV0ZLb7epdqWD22WraUF8MD0XVNW89VZ8ubA0\nwgn7\r\n=2lee\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUUYmOXEPcFrwRm+KFbEgJVS7pdFHQzQGyQcC6ziniywIgaewtsK96qk0yJ4bMyMfqQIoUnlCH24NgDnp39p9t5B4="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.6_1626795467940_0.5314161269852482"},"_hasShrinkwrap":false},"0.2.7":{"name":"@bodiless/youtube","version":"0.2.7","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.7","@bodiless/core":"^0.2.7","@bodiless/fclasses":"^0.2.7","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"3c0d00fa3c4f1e71940a0eacfca8315a8afa6297","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.7","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-/nSVYxwwfe8xQfWASAM4iaTGHzCgugAdMHywsXpb/BHZruWZCC6x1wudhc7zqGRaOl55Bzit/S8HFt1N77PQnQ==","shasum":"50c6692659403c4c2480a85404fa621646e316ce","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.7.tgz","fileCount":21,"unpackedSize":61447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zExCRA9TVsSAnZWagAActkP/2Be5SpSMU37VZcTd02j\nmkeBqOa8Vh61Ezv7mVSnpxVnw8pCU/1mi9sp9sXbcOWfmXQ4Uci0lFdVEpIo\nvmBiTEBrIhpJlkJE3RiEg/9qTnd/easmR/oRd9xH2t3P0sotPJeVqSd0dj4r\nH4lGfpMrzok/jYM3F8lP3c1+0DQGHdmGzC3rEGvdSaB8r22H65vzZ6pd//ko\nYsyldaA7s82Vw9LT/XdmoQwGVvNOkmn6blzdKEOULcU9sXXtB0/CgnFjfEqA\nRfOu92y1SCUWOuDCmE49+6bRVWoE2RGQ93OYRjWjIg9DM1wIstiH6nFolf7U\njmNrwrEjt3Chowq00r05aojbfaVnxfyovE7d5Tyn9DtGhEYLPIzq/mojgFkI\nTpxEgoHiTIoEp5XoSvPOC/07z7MNCWJh8CoGKTGNdQXK3Z0Y/CA4Sh9zrCrL\naMrPMqETYAGKrZzK69dXPeGRlZZaJa4LNs77WUk3lqI6gRND5v6Nb/awcEU9\nw9Dopgrkm6njbX0ttu7JBfBXa+OrYoBEoeKd9mBeQpnHEmGP5qUzGhoOKKVn\nA+HU7OaB4QeJR1eo8P1xsigQ2PB63fo6jnJ1EEmiIjNeuHVOLS+3TS8UfLt7\nXS72N78zMd37LzV3RXgWYy8JYVLFyr0fBUYEqK2s41AzLfu3rxprA26nmrOG\ngObf\r\n=R1kZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRr0VvKknDNk9Z57/L3kufXkuo4gOBFPYyVh2x8Hr9+AiEA4kJjoyfPMxl4/uz/xZeWG6UrSHfyuke/gnhBKfs7A9Y="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.7_1626812721481_0.061744517743840044"},"_hasShrinkwrap":false},"0.2.8":{"name":"@bodiless/youtube","version":"0.2.8","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.8","@bodiless/core":"^0.2.8","@bodiless/fclasses":"^0.2.8","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"4971885614b4e0fe630ccc135941d62e2b38e848","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.8","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-wm2+Zpczwr0E+q5t52A0eE8J9ijgRxoluA09I9NgKS4QOf77IIkEIEnAX/RlyvcPqO+0M/VCkGINzNepNkiwMQ==","shasum":"b68f5dfbcc6c2fb66860db6d897a4f82f35fd925","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.8.tgz","fileCount":21,"unpackedSize":61609,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAXgACRA9TVsSAnZWagAAzKQQAIdI5LGOBiMfMxKpXwEA\nZz1RhYCfLZrEzL8W3az2rbfC16h24gx/5Xx7vBguvg0nqtF6/XlY1mfsg2aC\nA2WBeVPlmeFX4ajQaxjGVuY8rW3DjZIyZfbxmZY5VzFvDw/GVYYYz27vau8W\n7DsUVCg/zqiJoNWCb/ZKZLZqSImxQlqdHAioVQqKu5YrgVoypBLYjquUQAEc\nNylLgFIXDtzy9serOV+4j/lj5iHI2KyMuqHnEe92qs4LrsoiklQyWWBPgq93\n9/f7hUWleZUI5WW5Otr/Hut6Rmr1pwWt5yIzvjTd+bzdC4frHxHKJ/6MEv+l\nsxlb1UaKSsjm00cXKEoodNu+TWJRqNu3gqzmMu/s4uApb/noGYfjAWNC+dFi\nPvhMCW6nOdK0kYap5CHDuqQd2GDdPcTLqRMSeZiYLYHXtQijJ0+dsmycOJpF\noGv049wHR0UqLhIMu3MJfrmE/ju9ksxEyr3MGxhlxZjtAqhyhrliYoZf4uNm\ngasWgSEu9M9vmzLkl6/sWGjyDYJiZo1zXRRFBT1agA6MesWRRCT58LD4TDi4\nDXMdWodPpgovCGswb8BPMqkexQE8iaNbO+rlaRfWHcIJ6JtSC4cHTYpxNPD6\ngSHLeVFw+td+JQQi/KMkVkZGi1zRcE5/AGdMNowsKa/lA0rakOPczI8QHkUc\nUX+K\r\n=6Oop\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyQbNO2fTfcyAS2UeDZgDxMzukEXmWz4ADrE5VZqOYMwIhALlJ2D00wSn2N6E4U3Y7U7PSwH507T2CsthOctZVL6J4"}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.8_1627486208157_0.5126343264354716"},"_hasShrinkwrap":false},"0.2.9":{"name":"@bodiless/youtube","version":"0.2.9","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.9","@bodiless/core":"^0.2.9","@bodiless/fclasses":"^0.2.9","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"7c1c793d82b31487749550fc3d0a5e0ec21a5c81","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.9","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-LqFyLVsdHcbGrXR6esfcLvu6AAasFla6lWfZWAVLLT5/QmI7bdtTAmbPwawbQz9Cx73I8y5facxkCWAHcYbsDw==","shasum":"ea7bb25ba544548bea5d6e79d8ca36bd43725051","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.9.tgz","fileCount":21,"unpackedSize":61771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/sCCRA9TVsSAnZWagAA12EP/2KbIFLGiuB06A2OiUCi\na3BocqbRZUa8LMTAs99ZuKQpW369EeFQI6wYGuaRJBXFGBNVDD/MjKfHWtNf\nYMmTCIDORna0XSck9xytkbl6CO3xC6OQVk5zHXMi1f9oi2j0HarjF03Fk5QB\nfQubM6B0kjwlfY8oq7LgoDFMde5gVVdaUJZCNjQzzDmC8a0XMAfl8jJnpMBz\nxqPFteAsDr8dYILb1Kq/Q9n+2LfSdrb+Yg832AgJPAC/7AjyhI9nWMoa35TT\nf/ikXUsABQE9w+VO/ViAVxAwwdkACOW4MWUoSU31a6LfuXzvUaA5C7uH1Ptz\nn9xYeHUVv21UjHoN9tXECCN+hDRRvvvvvikvlvLiXr/upSwiGuv1/3SreI4A\ntIXbcyvTBqeOEJDGBJuGkGZ9HPPyVt1j1JFr85FUtuZKs6Vrf6QPIsQWUT4Y\n7Y2QT4hKJakn+07lr+F8Zl1Mo7xLwSkN+mC/2hpyRVFWFdRZMUjUVTLCCgDR\nW1mi/jWaem/GroPf2C3WGHmuUPCbQ8NBpNrhC5DoaFAJdkfou4XdXu/ryqHZ\nXYq5AcAhGvEmnM/el9eiazgRgLgchyF1mIPRJgdVUnZH3LVcAaJc2UsQPTjp\nRY82JHn8QqMT80OOrQXXHqJtUzxNAa4QSS93lP/VZzxBFUn/J7nFqe0n9JQB\n8Ct4\r\n=KSd6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlJIaDsYueecr84jWswQGviDX7WCAFYMczWpoltr6PxAiBSX/HVXJDqbLQj2uEmAgoTCnmi2H2/TiAqxSL7d2TpvQ=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.9_1629485825964_0.009169670890045722"},"_hasShrinkwrap":false},"0.2.10":{"name":"@bodiless/youtube","version":"0.2.10","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api --mode file","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.2.10","@bodiless/core":"^0.2.10","@bodiless/fclasses":"^0.2.10","lodash":"^4.17.19"},"peerDependencies":{"react":"^16.8.4"},"gitHead":"28975d4a3d6c8fc6d54b89e2cc7a10c38e516dca","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.2.10","_nodeVersion":"12.19.1","_npmVersion":"lerna/3.22.1/node@v12.19.1+x64 (linux)","dist":{"integrity":"sha512-oiw0CDhFWgywMD2I0OFzSwYf4zrMd9XIoHYSqnJ2kk9dVijdk8whcAqWcPjaSt1hlSrAQmWmFFJVTlHeE2VAYg==","shasum":"21ac55c0c3733d6430c8f1bd6dcb791390340dc6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.2.10.tgz","fileCount":21,"unpackedSize":61939,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyFdh8xPHo9yZ1LlXr8z0ANwekdnuTRv1BZ+to9dVnzAiAx3s7SaTSzG5763asMgTa9hUz01SKWy3P19eFUnktd2Q=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.2.10_1633128588225_0.6785735268541249"},"_hasShrinkwrap":false},"0.3.0":{"name":"@bodiless/youtube","version":"0.3.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.0","@bodiless/core":"^0.3.0","@bodiless/fclasses":"^0.3.0","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d3f1fe196506c1b7cdf120e4bb90ff943b550841","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-DwfXEoTSAd7mELB829c9MC+ajM03d/OqNZpsOdB41HB8jAjqR7ltRlN3aQsY4ITaor0WtxaynqGIPrgPOXOXTA==","shasum":"1f94275078ca6e28c7877b00dec1670611dc96ce","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.0.tgz","fileCount":19,"unpackedSize":54516,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpPN1R9TT2CQqEJ0doqB4jQOE8w6CEIyXGKSg0njdWegIhAO0nA8AGptG1y6VhNpu7C9+efZ4LeneVCyKDpG5pVaDC"}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.0_1635790819720_0.7360567622229501"},"_hasShrinkwrap":false},"0.3.1":{"name":"@bodiless/youtube","version":"0.3.1","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.1","@bodiless/core":"^0.3.1","@bodiless/fclasses":"^0.3.1","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6272930e534cfb64c177757bfc6391665bf695ff","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-CGD6it1UM9w8bYlDzmujvfLZONIK8PZTOj1gh3Z3XHKa6iC2cMI9LaHq+/CbVZ0qWR8h7pMt3WgsFpq6r9YOww==","shasum":"d53526a35adba4460262e5444cf0618c58197e59","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.1.tgz","fileCount":19,"unpackedSize":54516,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9NEfmbX1PWQKv5DymKetefDbn+G2muNQc0VYjSAphpAIhAIQ3wroiMnhqqMblhIzeGMq9SAy7mcWuBmC/YJGzSyb2"}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.1_1636982225613_0.5660605554818505"},"_hasShrinkwrap":false},"0.3.2-ks-canary.27":{"name":"@bodiless/youtube","version":"0.3.2-ks-canary.27","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.2-ks-canary.27+ff85e51bd","@bodiless/core":"^0.3.2-ks-canary.27+ff85e51bd","@bodiless/fclasses":"^0.3.2-ks-canary.27+ff85e51bd","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ff85e51bd2e529602d3c4a27dfc5048b63501c92","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n1. In Edit Mode, select the YouTube Component from the Component Library.\n\n\n2. Click on the YouTube Component to show the Configure button in the context menu.\n\n3. Enter the target YouTube URL and click the checkmark or hit enter.\n\n\n?> Please note the following accepted URL formats:\n\n * **Share** (e.g. https://youtu.be/Rqla3gsl1Ik)\n * **Watch** (e.g. https://www.youtube.com/watch?v=Rqla3gsl1Ik)\n * **Embed** (e.g. https://www.youtube.com/embed/Rqla3gsl1Ik)\n\n4. Resize or reposition the YouTube component using the Flow Container controls.\n\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.2-ks-canary.27","_nodeVersion":"16.12.0","_npmVersion":"lerna/4.0.0/node@v16.12.0+x64 (darwin)","dist":{"integrity":"sha512-RTpj+yn1HzKcVLZUe51GOGoBYVoQ/jaOn4x5AEvvCfN/efjWdul5x5oYOCljqw3VLgljvNSGgyg67nIJYl2BGA==","shasum":"c0b401a8f1e271c211756933d9cf52195f78c150","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.2-ks-canary.27.tgz","fileCount":19,"unpackedSize":54807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp8dOCRA9TVsSAnZWagAAgvkP/jwTUZWFoHaXW60WLS6B\nYnQ9i2z1IGruTA7OE4OCDIwYnGy8acNGhwCAv04oEtvIqvxCHngpI1x9AFYl\nE/KcX9X4e4FCkvl52yE712VmNDzSO447PS9wQP4ubjQyiybtcUc5sE9tVyoJ\nUNDB5wfZIySRu8R52JsHMW1flBnlR5SW+ZjvbLzs3eDYXZ7y8BEtylrLBXrx\n8BrxtvsudSrl1JPEsv8HAbhNjn1a0ozXqpsaBtO0ipySPr0LOQ1Y3EmYwf38\nsX2AeOPIy7kLFZWQU8Uz2deslcmyAyOlFsebQCEdrcrbQfkatzWWU43qe6VQ\nqfvBZieDTvLNInEtV0vYY12aIxIMNTg9h2auV5OwToRQsrfIiUXzEaXy0qEp\nMY2U6JuEgzq/koHacQWxGP41s2+N0WaFF8aLHyXtJV6BQzhMxl1ozv3AND+B\nDQqZqAATBc4R/mNXEv8Xrzi8jxRAPUzAmrd+bVLUEy/PwtOte3OicrV8LGUi\nFdkarC3vyHwbVgkE1l+2yg+B61fXtL5VN2VNSDGJ/dN+JDoKyA3Ka1V3fgXI\nUYYyGV/3nUYOk2b/CJ52ENk/aWWQwgj6dLLY+wHiZ18tIz7K6WjBFMRi/Z1B\nZThbCIfWov1RfN2NTDjdDdR4Wk2lhx9NslMLTQq2H299FlGt94BQvvPPLDc0\ni6Pj\r\n=W0CK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxzW632VQ1VP3vepyrbGYZr7z811InD+Vg/Up3yW/7WAIhAOut0+0040G46ieUT0apP1s6GQ+Q1r2JT7uyvK5nQpzX"}]},"_npmUser":{"name":"coden","email":"coden@its.jnj.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.2-ks-canary.27_1638385485989_0.35377340244721167"},"_hasShrinkwrap":false},"0.3.2-ks-canary.29":{"name":"@bodiless/youtube","version":"0.3.2-ks-canary.29","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.2-ks-canary.29+880410d16","@bodiless/core":"^0.3.2-ks-canary.29+880410d16","@bodiless/fclasses":"^0.3.2-ks-canary.29+880410d16","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"880410d161f03adf79ca044cdd778531947cad0d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n1. In Edit Mode, select the YouTube Component from the Component Library.\n\n\n2. Click on the YouTube Component to show the Configure button in the context menu.\n\n3. Enter the target YouTube URL and click the checkmark or hit enter.\n\n\n?> Please note the following accepted URL formats:\n\n * **Share** (e.g. https://youtu.be/Rqla3gsl1Ik)\n * **Watch** (e.g. https://www.youtube.com/watch?v=Rqla3gsl1Ik)\n * **Embed** (e.g. https://www.youtube.com/embed/Rqla3gsl1Ik)\n\n4. Resize or reposition the YouTube component using the Flow Container controls.\n\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.2-ks-canary.29","_nodeVersion":"16.12.0","_npmVersion":"lerna/4.0.0/node@v16.12.0+x64 (darwin)","dist":{"integrity":"sha512-+xNJEPzg9o3tJlIczfMob11Dq/nwaKk4axzq6AhRz3qtZ97fNuZGP0I3gq0Q4oqmbW2YLQDXeGDMbVUvGNcbeQ==","shasum":"02d7f3cab454b5bef29c153b51a40ade570efbb6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.2-ks-canary.29.tgz","fileCount":19,"unpackedSize":54807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp8+5CRA9TVsSAnZWagAAqKcP+wQPZgxdWnvvKC1uBPQk\nVL9m6S1L5h0VN0gbpXcg2Xt/4/zNMwIYi7PHOc47zlNG+wVn/spw7CZL/Fv7\nNUdPuYfqWbLvkEPzusNruNlO/CM18JbkexydNv9havGucfvQvl4TzXgp9Dhg\ngu4QireAgLX936UnT6FwO1aE6sLRbKPoFadUiB8+wwEgSHzrIUr9b/BM59vx\nZDz0mHb4+r6OCCOo/0jMUBOEEQh2jMC8VZ0m7HSL4JF9TKP2ObhoM9QAvIyr\nh3m/a85sWTZNzwOBX7jXVkLj9BqbhOsAExwe32+e/MaU4exrs/9VKrxVwdn6\nsu451TZJhgaxVBA7FvhRdkjxQNy6XkG+VHFtBzYpWpXUahQjR7jOVhhk3DrP\nwtzDVfWgNboZukg2z47KUgdp0rcpOROdTpMXjGmMcUgNwM7r0F9lYi7hTAO8\nOxdzib8oHJPBTR4WA3afSdrR4cD2WollIgnpAM6eL+Cjxsa2+qqUaJZfnhh7\nSA9HwCvdo1BgF69Mil+o60J4hYFuQhjzl2osSASH7RC7BN8RVnkbXtg0Q4Xj\nvfSm0HDWS3Lehsa7nlivLQUQ6Ommra3uXRTcKXWiLMCMxa88cwJHYsPahR8J\nTPpfeeRWwJRyEttDtCXT3myUdmAeWPwsk9OwX/C0WB03jJVm0Wx6cg0AizFb\nbdmJ\r\n=O1/D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaOSQC9W/W5cOAUNPtKcSGZIsynZrAefYeSikGzq/62wIgfszY7K8SqX0jVCq9FVHwdwne6IkiO/g67ZKQtS58D60="}]},"_npmUser":{"name":"coden","email":"coden@its.jnj.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.2-ks-canary.29_1638387641067_0.6136358126416186"},"_hasShrinkwrap":false},"0.3.2-ks-canary.30":{"name":"@bodiless/youtube","version":"0.3.2-ks-canary.30","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.2-ks-canary.30+318f0238f","@bodiless/core":"^0.3.2-ks-canary.30+318f0238f","@bodiless/fclasses":"^0.3.2-ks-canary.30+318f0238f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"318f0238f888f4e2d88fb2ef15afba726f733443","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n1. In Edit Mode, select the YouTube Component from the Component Library.\n\n\n2. Click on the YouTube Component to show the Configure button in the context menu.\n\n3. Enter the target YouTube URL and click the checkmark or hit enter.\n\n\n?> Please note the following accepted URL formats:\n\n * **Share** (e.g. https://youtu.be/Rqla3gsl1Ik)\n * **Watch** (e.g. https://www.youtube.com/watch?v=Rqla3gsl1Ik)\n * **Embed** (e.g. https://www.youtube.com/embed/Rqla3gsl1Ik)\n\n4. Resize or reposition the YouTube component using the Flow Container controls.\n\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.2-ks-canary.30","_nodeVersion":"16.12.0","_npmVersion":"lerna/4.0.0/node@v16.12.0+x64 (darwin)","dist":{"integrity":"sha512-0XhDgMFTjTdxWQpq/8953Y6+cAnKrnPmAcQq9FueHs4VrLUKPgtJhKDRWIPIaZxoHvqMGbd9mpe2M/U/AVzxEQ==","shasum":"c101c3dcea9950b40aa6217afeee18be98916baa","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.2-ks-canary.30.tgz","fileCount":19,"unpackedSize":54807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp+bWCRA9TVsSAnZWagAAmEMQAIMc65SWtFWDlA3j3xGN\nxW0iAIxpVxziALoFZY7tcYkU1AHg4zqcfeYMVp6x41rwE9MF1kjAFyLcn6bo\n/ncsM2m1H4Z0kTbaOkEGigUDWIdc8g0r37uzHrOGHo9mbOMtf2pz9f2Kvw/k\nziVP6JSSVaB4asmM5KZQd7qzLEqNasLpgtB7btmESTncVDqmXO38v3pkBFOl\n9rxXTa/0o19/QMHVAuNHxrWEp1piRKhjVTwGy2eTvA3/YWMEXz+GsFBzKGgM\npG+eT+2HQpu6S38e+cnDW4XodAFbvqDHtaKDxF9wEc1UbM9kYtQk/NVmvBBf\nY5yRyoZ1r1PBVfEtbuZdz9grDJarKw99emF4V9RTRykvWms750GbzygUkI/b\nQ5odKwGUttKPsC59tcsYlalNfO4IiHM10EPyN+DBXN0ea27eGBETdAaAJ5Rb\nAoI+msHbd5tlVPXNgW3CdO7VQD6QC6C0uS3nVlx3BKiCi/HVswJXb6NEzuG5\nlhW7LPH24TyFaMkhf5OUFtPgzlBjFU2uw7DLFUziTyWjm9ns/+78AYmHJleD\nLb6wlkE1CGxar0JhZJ31z/GwU3+I9b2QcadNX6EnzTxU8o8YrnR+6QTDx8ml\nWjXEfCLhxqSXn31j1D1Y4gDcmSmLUvSsYUUXMjcaeZdFSVInaueLcOatX3FR\nHFAt\r\n=PU4d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvezLdHReTmIKDL6NlFzVXdgVwZxPLL7SYiDIzN1fGYwIhAI34IVR6kCE6zh9vozKX4Y2KgnDU7ZcEQq8JOJ8v/D5R"}]},"_npmUser":{"name":"coden","email":"coden@its.jnj.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.2-ks-canary.30_1638393558056_0.8746140786914243"},"_hasShrinkwrap":false},"0.3.2":{"name":"@bodiless/youtube","version":"0.3.2","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.2","@bodiless/core":"^0.3.2","@bodiless/fclasses":"^0.3.2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"74b8490508c1f10f3f1ebcdf91f744b08a3b58c3","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.2","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-8mBh6yZ06YgQs6TGhq3CbW3U8Bq3ChVMF8YK/XB72PRPz98hLYGhFFv3kuBAWNz53X0pbiZpRLwVcBKONC7Xng==","shasum":"7c4b0cacd94fbfa9c46a036a920ef4116146201b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.2.tgz","fileCount":19,"unpackedSize":52082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht0LpCRA9TVsSAnZWagAA22AP/20K3iuqUJa2MPWF/ne8\nqG3UjtyzByO66OfHukB0BAhDg5DRYK3pfTxZwewhftqemX6qelgRTHUmmE36\njCRkKB3X47KzEkF+HDtqfHuj35KYOWwkuNuH94AM7iKSjXmpzk7KVRZeQwcK\nLU0A29lwXTEYTd7nlWGxh7VdxpvMc0JR7haNQS19XICO7Ynj2NfH0EgOAN2a\nTTc6j/ftuBwSFDOIwaVC1HIJpJxDnid8mxl2UuTKy6vSbyDYkRP8YpSda+aD\nb73m2TAhFND5S3MvTII17aRXQ7LB0rHu0Bny5EutQuBWFzRZ+LwjidnarifX\nqluVD3JVI+rmgE9Gg5FRc0XRWAMhyYrZJIQvMd4glIeGWOsTMM6zwy9Ykk0H\nGr0U/LzyQZIaTuTcvglC3JaP+ki/6DHh6J8ZKkax6kR9D4DLO4BxpZwmzk0D\nXwwkQQETJ2rkP28tIgnrbJ41lSH+kQSwloz9LWiEg8Ogu2XknX/mwh3GKEJd\nn5ibSgI50Gsb8B2UXNzvATw6/I1oxhLUESN1k3excMWaLS+YlcKId6svA7Ji\nvVrJHjjrz3K/bFAJMSQOb/PmPRrzrhWvrpuGgcC6W6VoBUAY/rxv7s4qEeL0\nL3PnK3RoAfl3aTojETkFdYgllSjekzWjlOvpb1nrYEI+1wQ178Lneo3zTqJA\nZ5ZD\r\n=PmOG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhtzYnpPSz0//ljMU7emZz8475BUVV3hJtAOdKqrFljAiEAoMLLmNRAA3jrcwZb0w/CzKVWwwbHOOOrIQ+mkWdab18="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.2_1639400169620_0.5012056048253541"},"_hasShrinkwrap":false},"0.3.3":{"name":"@bodiless/youtube","version":"0.3.3","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.3","@bodiless/core":"^0.3.3","@bodiless/fclasses":"^0.3.3","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"2720b2a2761d57809744569eb3e5eb8b00ca2ff9","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.3","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-jCjJMUG6vgXR+sUv+Wr7O85rIpCIDn+ryxIMa2OECrOMGDEHONM7H6DPvAegUf8AMVioYRUmy4nNanbGmzxdvQ==","shasum":"27fe38adfdfaf29cd49787f5492e744c9aed3f5a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.3.tgz","fileCount":19,"unpackedSize":52082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumJfCRA9TVsSAnZWagAA8UEQAKN/tNfP49eE3lHx5sUR\nVFhoeS6Y/RfJYiGPZA0Dt2n+nUd/ZbqecPaZ5cxUU7SnkfDg1cWzZ0ijs9lQ\ntnltVoilMebhLGE8cJi9Eje7CYmbNqW5zXqJoPM71keOd4b7zdzfMO5+Ury6\nqVC9LwRFgjkcpmKRCQOJ44u/hzZYrR805sqI9ncZjULcCRuxZ/ZWNlieFmBS\nD8XNWoMLJSR8/FrMtGLLsD145hNzu5WrmfdEWynFeDDSwJzwFghess28UWtG\n7kgwPW1OkcavySdiTXzNnb5Kg2O22x313torBFS63op0vo4V/9UOHKyLrgS4\nMIxPtx7yd61YLSj4qxlHQ6VsChpB1V5wAkcLbwNo+fo2XiqUsqGEfD7InVTr\n96SRwoQxLmjrJHxe+jSqG8Z0hHc9aM9vEINDlMBI2tDoVbV5pgdhVADMRHhO\n2uQRPd5dyfk+iVd4ddWnOQ1zQv27ytU+vi8Nz+8L7Dv3nlEI6Kn/XR2E003r\n+N6QgNrUbpn72oA/NS/5LEVb/4JHdHtpCffxMDPUs6kwdwc4U2mdOMOihssM\ngUE+y8O0LnIuH5owpSEmu13PINuXa8BvGdfiLibBf02ZF0gT3Hg/uB3cMuZy\nmbiVuf/RYAu6c55RBfzyGigfVzrViBt2fPXYPFz/rAQb+JIDlBbxsTqmGV5z\nREuA\r\n=g3Nz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExp4rij/A6KI7VzHVOL+Fd536DB08NyZaR9ZaQpbPQDAiAmhEHSMrzqHO4tdV0jdsdYxRQO7UfwAwQRJoKzSexU6A=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.3_1639604831355_0.5039705908344487"},"_hasShrinkwrap":false},"0.3.4":{"name":"@bodiless/youtube","version":"0.3.4","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.4","@bodiless/core":"^0.3.4","@bodiless/fclasses":"^0.3.4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"55f467314b2ee7a390fd49ca226bb1795794a552","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.4","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-Ly9D91/uZY8+WtJ/4KSdnMjsz/Onky1wSa4H/jZeKSCvXDXlb2y6Hs9MBcogrKpLRcFRsoQo5JS1gA27i3UEAQ==","shasum":"e17a9f86bb232006b33d0eee8c895495cf356f38","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.4.tgz","fileCount":19,"unpackedSize":52082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhu3kaCRA9TVsSAnZWagAAB9YQAIucgKqKHDle5qwfUGpe\nOJmlYqxZh9gQ9wo/zNmwQuCrSrbVRTcvwUuzZxQ/kO7TGXRD9nSNvQrBXo5T\n4M7vu0HTJ4AIYWhRUmwYUIX29Ha+mfu5pecJE3sAIxhU7o6B9ly8Ylw4rjr/\nltIv5nhMQUoRL8QhR0DT8HZWH+7E6nTltMHP4Cn3QatKk/MFVNFn5n/x+rs0\n5yH8/OrParUy5mC/Ev9Cn7DcceYqCPYKIa/f0i1h/nod5v0bYyPzqMBsEL0o\niwdmQXGx5jjeuaAPtJrGKl9sUSMzVuSlaSt1TMSjeYa6Q+oUyOHFv1JoOdL5\n9l44VStGBXxk2N5RUzcbEqfxnX72Q6l1qm+EpXCeXEuxH3r2aii4javFsNzp\nDVBHS9eQPfcjH57hiY4MrgoHmE87eUMfmhGfCceSWxBkikcf/f3LpqxH5fEi\n8LMe0/AWAlKvrhI4J8mXdKFPGctgCFI/KC5lzV6ZOEMxmy6Gc4lLFE1mjeoh\nnIap90Y4CZBwNaMwlSy53AI9yw6p+Rj350MjqYPw0SELCjPT7yp/8gwx+Pge\nmoe4EkLtEfiHmOFZP5OMkXsSJSy9TvyddjEC9+FaUdR+FoIwfxwMcCSjAidD\nOqvAGCAqfk9dGDSCH8i3zfgkgrhYsR0bRs4DPoB49Dcnwie5xxcow83WpDGw\n7sk1\r\n=H7sl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFaBBHG4qtjKnClbJRHIZJV0iLJBCS0MwxEbHjco/7qtAiBPISJGMLmARWTG63HXgUB1UPm+Q5v/0NY6+AcOZMbKMQ=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.4_1639676186294_0.1121656203402901"},"_hasShrinkwrap":false},"0.3.5":{"name":"@bodiless/youtube","version":"0.3.5","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.5","@bodiless/core":"^0.3.5","@bodiless/fclasses":"^0.3.5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c3aef7b3cbd75558661198e2d9bb9df8112bc4af","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.5","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-UE4sJVe6sJzc6Ho4ZB3WBsTPmy5I7QUmcwMA5wPCDgfVUC2ukGRtUqYwLrh5DBUGKN4c0lyx+O6XKeL7cMnLFg==","shasum":"5c6b07603912406d0f9c9f921b6d96d1d2534c57","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.5.tgz","fileCount":19,"unpackedSize":52082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzFqJCRA9TVsSAnZWagAAcbAP/Am3GeOu7FxPO5pcb61s\nYuTDbXg9r+GBHugt+w4OUXa4v2rcGwc7tyMscMk3BMfSO19SHYzQ+XlDpC2+\n7WOxdHCQVsDJUMn9FKh7xyy5tDUD63Wt+KVNq8XGpf7LGZWaoZraQTvoy9kP\nRwmE3Rg1MdGsZkmuvsTvPtuA+tj/NN2/raE38iCfYFNd+Rb/nDzwv9vR1Icw\nnIFDNchZO66nPiFmTq1cMAcQFRKs+G1BX+lUvEr1mteYDOtKyhIPjufmw5a+\nl0+zSHcUCt9sRYOwcDlT0xpJSHVZSWrEmw2HGGg4XZte3KS6YbTF//NpVtCN\nnWEG5SLjeS/c4VxZrjNZU42znRN2tBSk2yMbTy50wHAiA19AqtDC5t0x2nhY\nb1H/h0fHPosHDkUoCSFgM7dcypUhoIfPfxbZQ5/6yjG+moIUbQ3+OR9OXW+8\n8XqbFcEsIrbUOfuoiungXy+XVRrB8J6RJq3pA4r2HWykk5kuFyghVmSNSC1F\nZCp08v0w3TJJ/mdUkKVFlJDrtH7P9WL1Sscw1mJi7RaZ4TVcIP3xlwtulzm7\nlDY0xdgm54mru+7sXz+YHm3lbzfU2A3oEyol9EdEUgbr+09Rn5MPBKsncUZF\nyinJictSfLkJf2cEJYi9FqKcdVh99sac5NniFD7nFgVpTbPQfwsBYhH7qCXR\nlQcl\r\n=WfBP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxLsQ4oDdF+1iuSSZYJyEM5/8lIffx0lIDIWXfNkEqHQIhANHBtEjYMc4IOn1gD/2dhhYUal1ynbHhjcThlTQf/FfB"}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.5_1640782473272_0.6882131285295241"},"_hasShrinkwrap":false},"0.3.6":{"name":"@bodiless/youtube","version":"0.3.6","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.6","@bodiless/core":"^0.3.6","@bodiless/fclasses":"^0.3.6","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"9608f016e71a9feaa30cdb8aeb690b0f39a8fcb3","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.6","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-UqRl4qjibPc8LssDfzcw/9m1vMXRyVQ0tw70YlX96aV1oTK8eY7i0l6lfASXTBCuu8+PoWQsOkPbxwg4qTVxsA==","shasum":"9ba1d0fd367e2d2a153336171f95ee518e26b77c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.6.tgz","fileCount":19,"unpackedSize":52082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7sizCRA9TVsSAnZWagAA6I8P/ihsE7y8EEYUjCFO5nMw\niV5Cq34dUywKjkOCl4tZhXef5z5IEGMeMQwgqz+VgOqsE/tsfWxId68pKDUe\nR/GZue/gFxzT1TZRyusMCFObVVngLGnjaVhlDxj1VQ/0/mMgIx+5DD8Hh9SK\n4tFiMnudppp/Ij9Kc/8J8sjoMzAK5V2KhFcvd7AtM07IS1HgDv1/J0Rjl6fN\nIOKgy3iCVUrODYR6iYLTMuSX6K9N2WZKJgUneTVGHREFng5685zdCNpO50WP\naQsvHUMv4n1fOPQb6hzwNxRogw9IkB16b3AZRn4pX828YxMAlv1TYBZySFK+\nJ0crHga4Mxh+Xrq6ZG08DX0G0NCJm99DpJ9UzxPNBi+jZzBuoeXuI/ttxnsg\n49TI3obsHYPLwzT4Ea2K4UG9Wiete3oVKN9CkXhw2+PgKr9FzTZrFNoABfcV\nExuXFewLYg4rTq8a9+tYWL+3cmd5SDvteIDAn9qRwrjgB8Dxm5v3Dt4ASDEO\n/GT13bSPaKAk/ufgENfbvoEAqbgU33etdGkmq4IAAPNO/OODSs75cSCYFnnm\nhQQInEoRDr/Lz5W2lZtNHltPJFFoqa1SJedvmNFcRkmP6oPJXPxRgRwvVDEc\nVwtYTxvvVL6+PDv/M+/IFF9JR1DRGQz0j/1uM8qWIkkai3MwVvuFGMzX1H/n\n9gEB\r\n=nth0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB9HtObFcovXfYiMlNsuBzSoIcHs+d+RYIo24B/tB1OwIgDppYmqVY7QGlQz08aZt7596gjQLOsFADsYklG//ySKs="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.6_1643038899277_0.39657149996484087"},"_hasShrinkwrap":false},"0.3.7-ks-canary.62":{"name":"@bodiless/youtube","version":"0.3.7-ks-canary.62","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.7-ks-canary.62+b04c75eff","@bodiless/core":"^0.3.7-ks-canary.62+b04c75eff","@bodiless/fclasses":"^0.3.7-ks-canary.62+b04c75eff","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b04c75effc18c7198100a29993a25c401da61523","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n1. In Edit Mode, select the YouTube Component from the Component Library.\n\n\n2. Click on the YouTube Component to show the Configure button in the context menu.\n\n3. Enter the target YouTube URL and click the checkmark or hit enter.\n\n\n?> Please note the following accepted URL formats:\n\n * **Share** (e.g. https://youtu.be/Rqla3gsl1Ik)\n * **Watch** (e.g. https://www.youtube.com/watch?v=Rqla3gsl1Ik)\n * **Embed** (e.g. https://www.youtube.com/embed/Rqla3gsl1Ik)\n\n4. Resize or reposition the YouTube component using the Flow Container controls.\n\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.7-ks-canary.62","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-WkPQctSfW3BSCUHTr7a8BbkKg+eyrSOhj3WQg0E+VMnG9G4S4twAMg6l/xzj9qMOUPtM/6yCogZOx00euKXe2g==","shasum":"5be4718e6190ccd5d353cc5ff085e52d553bd39d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.7-ks-canary.62.tgz","fileCount":19,"unpackedSize":52540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+zOICRA9TVsSAnZWagAAoYUP/ijiViL3XpJlnCB/0xLp\n9KZUY7cq21ElsbgicgVmQT3378DRu3HqdCsgHiQciOQg/YPMccVv30DXDS69\nAEbw7/PSEd4mNnd9Di72oIyIcLeQBMWVj5jIuq8Du6X0A1aR9bXEimZkr5UH\nOF7Z1DJxkJvo6ylluKF/QqdPysv/02VMDpP+KrCGH/snrNqh3XJ9t1sV8PpJ\nCqy5CCAzcoAAl5hDHN1VRufrfljh6ivTZWce1BZpEtcU/1hkW8DVL/u21AMf\nxiPhLSX6tynUSfmVRH5bBUPKc+DGo8o+Az4j9u8jC8jETLk18DhJxwlSUNk9\nkITGbmlqBcMETCin7LXyyT5lUQhlMKUKEPhSRoGXlOa3sut53QKs6uEB6iGZ\n0k1AEBZN56mjKc3vLG7BRh/u9ok52weOeQojmhoszPkw4Up1IC/dPUDXmGaT\nm5pRwyzxUQj69quR77AJaG/q93e8KNe9WxkAv+DdCjrOuEEheMvCGvsfDtTe\nLnaPRQMZ2QvWRrX5uhvfpcGccL2kvT/pAh0BuhcHJnVkyA5xw6fLNB5oJfsS\n168RnTrmEAd0eyQYaxUFum1ZTSYZjEzCT5aOzhma+XMBQQ/rK2CboD5y5g9B\n0dtej1BVUkUKST+9BM4R8sc7vXisC9gh0s4CIZuT0D+GLPowjBAR0SBzlKSZ\nFbtj\r\n=jzO3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6U6o0bvkBpM9V8AYG8eTiTO51fNZKPN8NKQhzn4RTKgIhAMde+XxxYaBvJ5+aVXrjWvoGEffy6uDyIXS/Ho/7lzXV"}]},"_npmUser":{"name":"coden","email":"coden@its.jnj.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.7-ks-canary.62_1643852680132_0.07946330433623094"},"_hasShrinkwrap":false},"0.3.7":{"name":"@bodiless/youtube","version":"0.3.7","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.7","@bodiless/core":"^0.3.7","@bodiless/fclasses":"^0.3.7","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"12d2c418189ca733f28a8bb1839360d7caa9e835","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.7","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-7xWUqT3oeNXUqE4f4iNV25TLSDDabqyNzFavMC+gxB0Ja8BdfSFEsPU9eoxW0W8Su5BGuoAQwBw5dy2HJbN8gA==","shasum":"ba238011ef65f3ba1c94946d451156c713328175","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.7.tgz","fileCount":21,"unpackedSize":228308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVlQCRA9TVsSAnZWagAAYn8P/iEekYHuMhy/n43ZFlEA\n5GkzPuxNW904w6BEnydu9S7rA/ZJ6VFJsKo6j8Im9kiFlF16/2mmRnn7oU5y\nW+y57a4RkGlNJq/UG9TIUxQZN3OJuQra6VvELgZF1zzsHymuXjfqh6CvJund\nb4wpELZ/JrP0e1JcQFcXKKB9aMejfjMJwpMXFauOmYYbQBPQZi/R9IOrSaoN\nmQetRKBR4PzoBJPb+r9C/jKrs8ShQApwWhxKnCoFn1XwowWH9KoflQZf5woP\nJzDn9R4rBJ9KKvJ+ZgnvDuNJ/QTL/8PgbLy+Iq0v5KQzPRS7IOHmWjyfDHGM\nN/CfPjWN9sIteJmvYNyR22XhgWuuDMBzwGdowuZ+9FJrh620BIht1XIYL1R3\nNnpLUNTIxTYptPluUVTk1mZecV2BBOICozC0VsRmtb9vtow6FTlpWJNt9T1d\nmWyIDp+/x1EkX/KrPRQHFI9JD+z+EwflQ/3heIbQN9tUNDk6A9Lj/fsGr2yy\nDQQH/tUOF8xZDbGZtfgpZ1OudSCsuSs8Nml3vUxW4/+wMKBuMR9tIa7ccEjX\nkn7vVXl+P7Or8wWajG4oeKH69RjkVpAKwULFK/TYKrfkVhYpOtvwtdRAoyzh\nbfqMrku5wHei4sAm29psrKb1/lDF3krT3V5TEldmo3VdW/8hlZ0Lg5Pf8dFe\nEDqd\r\n=o/oW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD39wwKyiH2+4rNHLpAh7Qi5hdByEofmMswJX/iLXL5GwIgYbPTCiAaM5z1pMwTKzd/JFVSiSCV5495rqZKJvCqXmo="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.7_1645042000354_0.47833908082986065"},"_hasShrinkwrap":false},"0.3.8-upgrade-deps.171":{"name":"@bodiless/youtube","version":"0.3.8-upgrade-deps.171","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.8-upgrade-deps.171+496da0108","@bodiless/core":"^0.3.8-upgrade-deps.171+496da0108","@bodiless/fclasses":"^0.3.8-upgrade-deps.171+496da0108","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"496da0108b7adf48833509af6bfd33b2fdce0acb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.8-upgrade-deps.171","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-BbzHR0OOFWgQpzEoRMvgnPh5titRcNGajyxJmVjqn3LHl2E4rOH4G+wmxIB6gKqSoDD7WYX26Ud/YN5XlDQZJw==","shasum":"192f662206286c5ad49ffa933b7d3472ea05d63a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.8-upgrade-deps.171.tgz","fileCount":21,"unpackedSize":228782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDg3XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrmzw/9Fyr1KOwvJkGZCjprMJsGwIBgbMe67qgtKFq4hkAD+V21RsxX\r\nf94YHh04uDyxxovavy+BctnNs3uwo/F0OGhAL0XAuzl94fE/VFNq0H+NrhzJ\r\ntiFc9RyWG5jDlazaKPHzYgYI3cCyjBFCOhAyfxqBExdSpdztiNB1B/byQ8dR\r\niERFiWpj9pAreSXDN8C5TjGS+1K5iW+IHD98MFtWcCVtV1D+bGH9LfH5dor1\r\nJDhT12ZkcRrJ9rsTBuqpn0VkfCGdHjHsPd06b38TC95Lptipaq8Zk4TvOUCb\r\neLYQDdRfpt9AspVhCIp3kJiH2Mu4dz1C8tApj/D/exdXj4bSjYsIKFWfEMM5\r\nlYXK1v873bODR8iSNkNbig86ing0AfKg6ZkPvNmWOVfgx1TtPKS4+k/ynyBk\r\nBMhLzf7QVYu0q2dFOLYYbU5qAI/kfIpfuypZcT8Y22gF2jST5Ywcb8BgjdBR\r\nPQND6FRm3AK3C2vmFPbSu7dqYIfJItFY8FawcwWj/lXqN621BsohB7E2ch+w\r\njynCr57mD2HYv3QpqpGrze5j+IetCJT3udwZ5nJ4f3309kV3Osh0QYWY1mPk\r\nkR2PiuW0MnETg3zcV4q2jOUAqfl4CMEgLiS5ntHiBAnX2KNYXiAWSLVdTv1Y\r\ndHcklIMmPkrA8O5UktM7VQg8D+Uefx0BlEo=\r\n=91bd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvFg3a7h9XPnWj1ZwZ4CBWiRhxSqUyCfl/5KTKuy1CyQIgdXNRnHap/yA12Ll79y4aEHl13G99FMO8njeez+OkYdY="}]},"_npmUser":{"name":"coden","email":"coden@its.jnj.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.8-upgrade-deps.171_1645088215412_0.6401873342596058"},"_hasShrinkwrap":false},"0.3.8-upgrade-deps.173":{"name":"@bodiless/youtube","version":"0.3.8-upgrade-deps.173","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^0.3.8-upgrade-deps.173+a45e6eea2","@bodiless/core":"^0.3.8-upgrade-deps.173+a45e6eea2","@bodiless/fclasses":"^0.3.8-upgrade-deps.173+a45e6eea2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"a45e6eea20f93e0b09721a107f62f4ac85474b8d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@0.3.8-upgrade-deps.173","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (darwin)","dist":{"integrity":"sha512-8w7vVqr7VF0NWGKguwGKlmr8mPp76pNpFl666fT//SSkca+EOT5KG4SE3ajp0c1QVo2ocNkem3TKIWYTD/OdEw==","shasum":"3231c717b88c946b564c8f579fb420b5e960aa52","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-0.3.8-upgrade-deps.173.tgz","fileCount":21,"unpackedSize":228782,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDnEJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqrw/9HvkU4/iF3xCX7Vqg35eOtXFt6ZxzPnwlozXUPsVkf2zhjrKg\r\nfCSb0NGuw9Fx0f5P+j6SFvrIWbzj9EL/K00wfd2F/gdzl1rV6NXHtOtYulHO\r\nU9DDoO5ZI/7Rfoy6Vr3ISEE1N6D0MyjdylzOWdXuuZK/ItrwXeAuySKBMZDi\r\nWqZ1EVzXf8+RawXqeIxnsGkajdhsag4J2l6ywwx2+Ms/av2wM1u83fJfgbL0\r\nwYYWGsgbsRJG3mk6YuYqh0kUlPbMzwdxX3a5eKepeOTOnxzUaSgx7AaDy9sJ\r\ngtWBnC2jOQ67yuxYLn7laKL9F8//qWkOVRikxCgGc9u0i8t2t1QYg6UastIS\r\nXHcpEmfzmH/sj+4SwkcBOPekurt4xQWj7qMDUS08YYlgY+ucL8IymYB2CTeo\r\n4sq70Uq2iJSjIvjDCCe1aN63W41TBPz0g7LvwUZl5KDcUKaNYuZEfuDK9yco\r\nMy2+G5zbPXTk3TIPwWHqyTUzrsfr1WgmLVtNgNy6/184uxi8FUVcd6alTmXj\r\n4dqrNs1oHpJvjo2+pWnRQCsijSjnKV92UX7WmNpMvTtUqytEoAmo1bmVF5io\r\n4r6d2YJJJGAwud9gPcw4e85j4MSDYUIOaN/+glEl99flffGdmGwCigzRYuFl\r\njqX2Edo0lhNZ1R0XiY5ATK5FUlel3BBt4hw=\r\n=F5fq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxTvLZxqTyxsMyyuJK3Aj984kl4+i541UEgXaXyIlixAiBjaSAYz2j+dR67QBjjwrmOQ4XcS7AbhDE0lxG3xUU9kw=="}]},"_npmUser":{"name":"coden","email":"coden@its.jnj.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_0.3.8-upgrade-deps.173_1645113608905_0.5712384900721321"},"_hasShrinkwrap":false},"1.0.0-beta.0":{"name":"@bodiless/youtube","version":"1.0.0-beta.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^1.0.0-beta.0","@bodiless/core":"^1.0.0-beta.0","@bodiless/fclasses":"^1.0.0-beta.0","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3621416d8e119c1b64c6b2c5eecd57e46678f94f","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.0","_nodeVersion":"16.13.0","_npmVersion":"lerna/4.0.0/node@v16.13.0+x64 (darwin)","dist":{"integrity":"sha512-2eg/mDH6+l4inPLUZ1LprAADfZec3sjThGoq7L1USzePur8ZkfwV9wMjj+lCOLBYFaEh+gwpRzF4wxNP32OeHQ==","shasum":"a31686820999ed2b12db6387f1c2784fa269ffd5","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.0.tgz","fileCount":21,"unpackedSize":228852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKR64ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYIw/+OVySRkuEOVhj/37S0T4YuvkKwSlyht23ujOftIiHknJkBXwP\r\noqp7XNgMw4FAqzWyyHaSs1KHGZLMwDe7TcnCcxStmFruriqeST0QWdsbBxtc\r\nQ+vp/PWeiXwaCvKW2VZSO18YDu1pIlX+4GjYNP55aYUJW629F2ApjCjaMhHp\r\n1AWJolKepeNU2cPZJc3sa1M1R7a75fAvSRK2EmlqwY3PhuF7GVQEzD8sKgfQ\r\nTYnnSr22YEWVn2Mv0xllkFuMApX7gGS7GJJYODZA/P3nJk0Ek617y9ViHNQ0\r\nBaDoGyf+sxpUFztgZldyEjBbrNwzeknn9JMqc/j1PmUvwcQsrcdfwbUBhPTT\r\nKG4EzxpTyTSZoSD1XT9333G+kmBn56UVe8p+heruWsqYtkOCb2pttACVtVjp\r\nfjlkeMdX58/aIUidtRyKpsUURhj+QzSDR+zTL+Wmh56PwtIPv1cvCuwRXoet\r\nwAlSzzJujiSIK2raOA2NVuJsilsrwOWnstOQakwDt3NWdyShNWvwDGG52FoM\r\nvYy6d1sAom4wkEUOrIZMWNWujIErRRtCWX4+6BZQVyzk4LQ3xXn3vX0Abu2L\r\ns5g+X6PsWfFnHU6rm48PnoIPqJ0GIT9qYUoGRgj6s6JsTOnV3DQmHuL56BA3\r\n/GhQ44FjLgBWNBubnSZfGlMUhySUh/PCUAw=\r\n=OS3t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClrr8wCwQJp89XMK/xPkoXzJ0zH8OwuyMFT4OIETx8OgIgBsyedTtsDSI/9tRCOf7h11r+M0wJTEfhgYRUMa2BOSo="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.0_1646862008307_0.7848203824518336"},"_hasShrinkwrap":false},"1.0.0-beta.1":{"name":"@bodiless/youtube","version":"1.0.0-beta.1","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^1.0.0-beta.1","@bodiless/core":"^1.0.0-beta.1","@bodiless/fclasses":"^1.0.0-beta.1","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"467cc194cc347d29eb691ee0d772e13a4b46263b","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-+xFC80YYJhzU+PNnqRFr9nREqKu5CaDVjtYdnHn4TfPAeIaAtKVd64El3kqwRQAmD2OUfa1lbqG9+memKX/EmA==","shasum":"a879e606bddb706899249ef006284834317814dc","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.1.tgz","fileCount":21,"unpackedSize":228852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL5tCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzRA//evwR61Zd1EsTEP0kQmp8mzoryBJ50xa2dsKE5bk3gJ6N1LAk\r\n4eJwlwzOmVQ9YGmun6HErkFeANOSxcmOV7+TBnxtJuS4Ja/G0nKSI04VJfSA\r\nKyaVtJlBqWxTgprOr61WlBmApGwVZFTG4eMBAAiCpBP5bIqhOnYAPy+PwJtN\r\n3KkmVUKNZdXSpsVmTEtQjtIT4PKkE+VD26OZZPX1O0THTEGhurtv/F/7sS91\r\nZEhdNL/0jDyRxUWeV1ozf1iriRJv7aB4z9EPXpC+Whq7YQ2OX2FoqZRvBCf+\r\nBeWlCuj571dsZYF3yy90AWR2kdnqTjveMJPUG/pryITSj18UCjE5TgVxeL4o\r\nXLe5SSRqAFVm3uItyYakpxvb48n1qTZms4RJJfELHKzPszEkJUhrgo1Br6ZP\r\nj/xBYupv/hGhkiQT+Ns0u5aiufOy+HAdVGDqRp3RL/IT4hP7IJ2u54Guz/gB\r\n/IbpoEMLTp0F+XYJA/zIMUzxFZB7tIltodIPvvCXEb71K9sxb+TvOBVE6Z3w\r\n8i4Kf9/Q2aXwyb2toY5vBW9e/c5W5Ob15KwhETZwxG0VSATU3tCZqkcoPxRv\r\nDXkyhn2riRl48oIp6DIvo8P023m8ZgO3UNNebFqblnBSe/lWDEBz9XBOljvQ\r\nSpfeC1FE4tZgf5kysAdYl3N5TdYoOETKBKI=\r\n=Ec4E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPDao9BAQqVO1m8sIMuNa9SYKPuwXinpma71j+257sSwIhAKC/V9RvbMmsTlBvQq1SgOl8e74miOeilj/vJ90BoFyf"}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.1_1647287105931_0.6149409014115244"},"_hasShrinkwrap":false},"1.0.0-beta.2":{"name":"@bodiless/youtube","version":"1.0.0-beta.2","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/components":"^1.0.0-beta.2","@bodiless/core":"^1.0.0-beta.2","@bodiless/fclasses":"^1.0.0-beta.2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"66e805f5c1fe48948e6fb89ab7031f4fb9e2e03c","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.2","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-lk+D+QDwaV7LMi90tuWY5UuvJYuwDqnurytWTEgfSxugXOoraXAld7cBqJU7zNLlvnT17D8kIboeuYgELgfi5Q==","shasum":"dca668f88c08c5d9bd3094c1a6f42302b7e155b8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.2.tgz","fileCount":21,"unpackedSize":228852,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgVTrzxwz0V8vNAE1TrvI7tTKZgJoUUDY011+AzUFgGgIhAKNINejiZx6MzxDhG0EJZVk8i38qAv4guu9rUu3ETmkC"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTIDtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0jQ/5Af5fNDGjA+bvMjLucme4djFhtzGiCCiQwCgspqR99wI/f63O\r\ntf6Ah00e4RuDFm2wKNNEJkFtwqS7fYaqNAB517eQ8Sv8jnPaoWTCFcDS7KY3\r\n+NNcOUZ7wxiYQxApxX4LX+ORFnt6+6C24H7W8r14Vgxe385xXGuwP8uOQ7l6\r\nUBA3dKrO1Y1SePjO9RfxIrnbJqVWQ0k2humKkp8EHYYN7OGJ/bbawSzLMTpY\r\nsUIbWG9rlMz6YRZz0H0irA/cCUzeFgJ34jsaugZmYkWcLSEJaNQS6/6tcghT\r\neXSdjCKCN7shKuFUYw39hihwOPfjfVnPhcnTudiPQH9kjSoGqPrICHat7ee7\r\nSQhyTLYcKa0iO28UX9XpQfOznbjz0Low7lJrsW0NwQttT0NzrFRJqncsxMud\r\npFU3kt6/DctTBdAkHysPrYnlgr3nFa4oBMu6fwQi5MtfVSjzf36S39QTbWtz\r\nZTrNVBXjWY+G+E4qN2Ymc3JQln5vNagmpbZmNkOf2cQVzXTHuccNAvEO485r\r\nrTiheYQI8K8ipgaHCo9VPIfjkAzK9RQ6LtgoAN0Fphna/8IiSjr218ztprjZ\r\nep6qxgbKXPPfeTZBfP/uJBJaI62rBBBIvDBIZluAFapezgYI0Yr32IS6AtV0\r\neDHDXM9pmmUs4kz2IIe+FxX3WnmBG4w7SCg=\r\n=v4RL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.2_1649180909388_0.3113911694760967"},"_hasShrinkwrap":false},"1.0.0-beta.3":{"name":"@bodiless/youtube","version":"1.0.0-beta.3","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.3","@bodiless/components":"^1.0.0-beta.3","@bodiless/core":"^1.0.0-beta.3","@bodiless/fclasses":"^1.0.0-beta.3","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"9b794fabc16476acbb103904845e0f1d0abf3c17","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.3","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-uMc8/IZNI19xTP0ZVN9/7+7aUNFZCYgOlzYm33lKWtknfELg2/Muaaf7G+04p4WSvOJEZwlJ/N8FYnkIEe0+Og==","shasum":"57769c98ea8b018962ee5abfcbddfeb6f9e80a5f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.3.tgz","fileCount":22,"unpackedSize":229724,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeKpm7p1LvNNrAPmokFyNCgUBZAEfkhYJJUxjaEv18CgIhAItxV67qqzoOLLryeq3IREzOfG9QMlwiCshVL8Y4oQFA"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVI8BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPbQ/+PyFhJ0IHPoHTzBAYwH1vcQJFQH2HQwxLlT0kFk8hNHZKpBjL\r\nmoxeK/jty5Ahm2t4ymzRddj5enwiQmcVcXeEjZAJtjU1O4ClMhaKiEhCe8zh\r\nB+9UaaFooY9oW14o1eSjuFvKb/PJ0kLkARmHoHNALYZe77lbnNHEK7WjJUzr\r\nIzoCRwWFIBOKV9aXrznnly4ogHEJ3b7ktQ5knCR+QLrlIYg7FrHRBI9W6iMV\r\nzNcI4tGf3mTJIEfH89VObt9vlxUXhUowc9qiGOwLz7ju/ztqUWperPtaoD9G\r\ntSpsRC2H2vGuYSb9WgWsIEUkWkn1g0oj0n8aqCVS+tNlCD6GNewebaL+vPUK\r\nwLsz8l/pUu1hY4WX/0ldxEf9gcOiM+tiQeEgKJVfTbExW7uGdVNV3gHXIHLe\r\n+kCUXjvbH81cI6KL6KdA9GmHn5wZZUN2b1elbgLFGhdqTQiaEirdNRhDPzA3\r\nMALf7N9RFNvM38JY+o1SMTz7dMY5tELKfJgmjvesku1lF65p2eu7moYDM2FS\r\nEnb0Ex+ABITCrbyZ56IYxcrmix4teMGj5DeOvFv0F8YWUhgT/qeV5Qd2bf9a\r\nbnaDOAbCcTU6skCBOSjOaTp5Fow0ds6tEOBxjhyyDneHzaqnjbczumFQAhks\r\nuLbFA3W297fJyOv5D7KZbN9rXoGcZGm+lEY=\r\n=T3Cj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.3_1649708801324_0.8477331303159694"},"_hasShrinkwrap":false},"1.0.0-beta.4":{"name":"@bodiless/youtube","version":"1.0.0-beta.4","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.4","@bodiless/components":"^1.0.0-beta.4","@bodiless/core":"^1.0.0-beta.4","@bodiless/fclasses":"^1.0.0-beta.4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"53922ecba5b4ab3d2e932c5f5062fd139b6a661a","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.4","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-5lHN6eiXZwLIEDLh/mDI2hUAwv5GM4nVeZqPHsR0h3H3wI5mooDX2g+pwgv3i8TLDXNAc7KfnIPFDRUs3wV2rQ==","shasum":"71692f5878b228d978b6bb974584845b010192f1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.4.tgz","fileCount":22,"unpackedSize":229724,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC9aVTHM5UF2LszGQzLpae0a4uhLUlqychUO2rVYD7AOAiAZTfojm8Yvm46TvZbMyn/UGEbfFzrVBjmZ1hBB1LVpeA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVcHaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKbQ/9GrztNpViamNZPI3zGj5pUhJshK0lOcPJLr9ESRcEIyhlE3rW\r\nm4uJhMWck3OL8HIN5Anqc9wOQ9+fHoPdF9oUCQqFiE1AO+A/IPGjg86aacFS\r\noXZKUWAVPjYCAaki1SfeRDvN5ARDZLaCyjM+k0N2SmHN7uo7lAewA0ORsKMf\r\nAumMQGHkXfaYmOqEE5bat7qvJQiW49oMjE0jP8ErNfVNR//FT9fHVr7gk29T\r\nGQKE7Am0Fd98NsuqE2artz64pjjf3EzlcThR2LctCvgPRE6dU1feDJy3vDEc\r\nBWTohH5W1/ry+E35X//BhcdEeZsSLcp9JCXxvNYDqLq+a9Q+GWN/ufYh++zt\r\nfhAyY82FT05a9QtQ6dMgBQhU0KK9tff0ijZJ7ZU5GXNZ+veB1wf+rkxseIkE\r\nExoylZe702iXNM4HVFbP9DGMgUlM1qjg0hVYh8aRtSzHoOZc8AGaGCp0qyi+\r\n7yia3f8EVg5KkLsus5OZ1l1AMk2RhqJwBNhA+19vH++P4twIRW284rYfaRiC\r\nzTlvKWTjUCRkJLPNkOKlotDWlOha0fDz05wifg/6hQ3u0syS3rxONECog07b\r\nJgCgAPZc2bc1QOl6ksyHm0VPfMIFDne7WMLnvTJU7+qS0dH9gScj4ggWyFsn\r\nmbfmG38jCDRDDE9TCFt7RaXXGuBt0LGajDU=\r\n=Db0P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.4_1649787354570_0.29746304593928796"},"_hasShrinkwrap":false},"1.0.0-beta.5":{"name":"@bodiless/youtube","version":"1.0.0-beta.5","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.5","@bodiless/components":"^1.0.0-beta.5","@bodiless/core":"^1.0.0-beta.5","@bodiless/fclasses":"^1.0.0-beta.5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"5e2d10e937918bdc345e0c18229d43073610cbf1","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.5","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-cn0uuUB3wxxuB/jYdlNiesXBLRh/UXO2+jsHHVRRk6T1Jkvho96fSkJDuTN6fuX9jcK9dLReA0Nrpji32fVxaw==","shasum":"e0fb4fd3b2a295344b3baa45b17e4967c628d442","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.5.tgz","fileCount":22,"unpackedSize":229724,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9P2bVVC0WSBFIEwKy97Vig1wCQzYFXAbjUaLkx2dVKAiBNqz/Gd7HZy0Pn1qh3RBIOJvoDWKybxkUGxZ5zHx8/ww=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVsg/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM/Q//UV/ieO9q+euQaLuyJRbdqSrqu2Tfcbkq1uU1seuncTmMrDdc\r\n4bh61Ekwy0SWhX0J48R3MmyGfD0kcncYTrn1w8e+/RQTvWtRnTA46bSOmeqo\r\nlVmXfQln6NqzAd+k9s4glRVhOPcNJw53Tkh3JnY8R9Z+UYasLNV2zMXbcAIN\r\nrufCkShwCquVLFAalUq+c54o0TCehdZ46M6x1IUe0YAlLyTwSmVkUvqfSK1p\r\n+kbRDRLsNnAhoz95ogW6LdBtbpU1Ihbfb3skFgZccKy/HrfWDlRPo0RzMG5j\r\nT8PFZTeIEhhlsfIZm1EmjMja7qAGpNNmbEIYc+cLIO9qIUTIWqbnkVak3uk3\r\nxHv92pJL8wSxmmOp2aTzjqkDtq5Q+xa4h7FBOwXHyqNrqwEzOUJoVqHZKucZ\r\nIpyBEY3v39y73efhmQfD7rB+hk4P00PaLa4vY2O++cRdXscjPFeOOOvLLlNw\r\nupvk9tj2xOK9jp1S4Tzs91eL0097uTPrGigqzLeslwofIPvT6oJczpqNe6xR\r\n8wcynLVcAMPgF4CxpW1HM/D4AbE9jPm4us+H+Z7hwD0RbsTXfUat/Hi97p+1\r\nUP4Ux7PPjTVszT82NjEzfvIH2wr8kDSABCE/aSsjfR5KMiq1WoC5YrjwlmjD\r\nCTxZXYVhXmulpI4MK9jeoXXFyrYBUTxUjDI=\r\n=LLau\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.5_1649854527346_0.4094198002888283"},"_hasShrinkwrap":false},"1.0.0-beta.6":{"name":"@bodiless/youtube","version":"1.0.0-beta.6","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.6","@bodiless/components":"^1.0.0-beta.6","@bodiless/core":"^1.0.0-beta.6","@bodiless/fclasses":"^1.0.0-beta.6","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c1cfce3ae3101c2b42bf99f8330bbbd4d6837904","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.6","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-Pc/MhkcU8+KFmeJO6DiyyMouBJe5kK3U4A5DX+pIaqhwpYwWYCcAPNEuQTqY8lMPHS0uOPkGNDMcPXhLvkyqCQ==","shasum":"79218f35d69122571eac20dd8c7e9db1359c5f3f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.6.tgz","fileCount":22,"unpackedSize":229660,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHZJWYEADb3ZG1xWw0xDOrTSYLy8eR44K8SRbF2S9M6JAiEA1QrAfZeWDBxFMJAPWQyjlR8c41dOWgyhvBgrP8n3OIA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0ljACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqGA//Qe3+R2SAgddUiGfqzfs1hdxqGhLys2XGkJIZbUc5M7VqI4XP\r\nj4d1cz9kVOEghdEN498ziE2fzDjqPUW85hiSyIqp7M9WMlv8Fk/0Xpv8QdY8\r\nlXcDTivvTrJImt9JCQvdwz0QbUcM7BCC4QuhrcI8uqoQNR3ncbe4kkgalw+w\r\nSb1RQo4WCNRXA2N4RSYs4kosLrJmxjZwrHVxslbS9K3DYpho0rg5jEQuLGrM\r\njmo1Z12JE/z6Bz5FfRvbbebLWCr7efTvdYX9dmdVikQqGbqB2hJQU/tcnzhU\r\n2FJb7IE63QTasBnj8CJZ/R3hbrvw6Pb6716YqXDc4Pjaix+MwaGSaGqTgYd9\r\n9vqenS2Q2H/qQhq+MMjB8H9u47ft7BFUdyWb5WvWnczhyNtF5Xw9uNNGyuYv\r\ndn/fXlHz+UQ2TWQBBAuoKZNtiiX5mxD7icVeVsaupDKpD/i6u4SaZTFlYwju\r\nbcfn5MKP4pPGBbcIA54ynlo7fGfkJwlaqXsDfPxskzcyafLOM9p42lwyhk7f\r\nGtj1SFvidWEtJTx8bOKWv1/ctJavsNl/zTS55oaC/zHkFwP44wFKi8LLMvQ3\r\nHRMXdGz1zB8ITf/I2tX7qm/biEdM5YcR/qfhqYvdDRrorlNlzQkLfWN+NbWJ\r\noigzdwlI6XGSp+HP2OYl0nrepF5YKpSJdUQ=\r\n=eg9E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.6_1649887587465_0.11843853492745327"},"_hasShrinkwrap":false},"1.0.0-beta.7":{"name":"@bodiless/youtube","version":"1.0.0-beta.7","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.7","@bodiless/components":"^1.0.0-beta.7","@bodiless/core":"^1.0.0-beta.7","@bodiless/fclasses":"^1.0.0-beta.7","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b5bf8e854ce847e47d6dcd1315fe8f12cf122146","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.7","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-/gpupkykzob+iY8mqro4GHPu3TO9uhcd8ot/fuiE3OBCmhM0TUj0RvvK3knk9hKrUn9tFlVeSns+B4zR9GBYHA==","shasum":"887c27fb2954918171f7c8a36363942ecd6db6de","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.7.tgz","fileCount":22,"unpackedSize":229660,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjwIFKxD8BSl27Jwrv67CukiMFVxfyAOU9AdwntOvbmQIgQYpATqj40g1f3v22aITZt8CR4rTvqiZrUVCHn4AQiqE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV2PuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0QA/+K9I+LaiYofD91tATKclbBLFjdat5etFsI7CB1nWwxp7Wj8Ix\r\naC+GEUQblRejK9Mst+zFFpNh5MF2ZnWZoZnTAb8vdYSoUryDwhojdK3VHO9V\r\nd2tG0Ld9JQ4gV+S+RNTr3pxTbAFc/xy7dhSdYSbgpos4EJvUqycJhyBcUkgQ\r\nBUAjUAJMIfA+PXHcy+5xWJlyLHzF/3irtsaw4tvHHVjhz/KuMJYe7bAYZsHv\r\nuAzXcSRm3lIpiK13X7Q7WmzgXds4yroAV/GYgOYQ1nDTRdQebGokgTHpIvlR\r\nya9AJzY/0CiSrU6LawxB4u8Cf6X1ri7lq4JzcbvCci7GG2OyQnGWKtM9IP+t\r\nRx/b27r4EvX3KReOpSm5VxzLPIbQAPXN6sw7k76e7bi65I9CV8WqPxNHG2/k\r\nnv0FGJ5sXJwqHhABqkEW9vNKunHjRjmEfKYd//rAelG0/AR72tuY0jjMktQ8\r\n8fCm/7nVOZ40ogcCHrWC5MjDfNwmBhF1bkm+tBsdd5Cs12/jxXsthnIKxu1E\r\nA+e7p85Zi3grf9pyq4IjXgpOsT7jwRrReByvYxrwbpqL8rP8id2UB35D3cts\r\n3HDF6Lb52zG5D1QLrK+Nwwn2pF1rh0mjlbeCgi+Xx4vNURuBeV95Ro2OoEev\r\nOJJ+pXi3hcB5YVfoiKlc1XY8uFh0cdPkhq0=\r\n=ue3f\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.7_1649894381912_0.4655652381618942"},"_hasShrinkwrap":false},"1.0.0-beta.8":{"name":"@bodiless/youtube","version":"1.0.0-beta.8","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.8","@bodiless/components":"^1.0.0-beta.8","@bodiless/core":"^1.0.0-beta.8","@bodiless/fclasses":"^1.0.0-beta.8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"5496f80a8a9c9b49380d4d7b1cb08e2ea6fa3250","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.8","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-Xsv0Cpjw/l56i0ZQbiIQSPEJHAb7IrnPkcc30N0Zu+3449oTTOZu2h2xWalGlFP/at+L05YYoUHeVsG6ukXQBg==","shasum":"effee098248e56c0c21ccf457e74f4425d45c353","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.8.tgz","fileCount":22,"unpackedSize":229660,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnTh80XBc/vSGS4LuNF7vIZoYmZ5l7RCMQ4eEdX5ZkIAiB2SoftgjLkSYg5FXRdX9lYN4rgBMyGzn5evf00rIeqfw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYXpUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmri0A//eetdEvrtH7r9lQYtDcHnJRZRkeVZdGBhwbO9yhj73BsXtc8t\r\n7u+KdRkJSftGgwNTDoc80nHZQ5LvdilDLKNYtfeqwk49LKkpZREctrPoEYg7\r\nJGOXG+peW/83lDuIo4RVF+YMdhjqXR9c/Hb3XoXt3nzcMnxWbE+fqjh4HKYP\r\nFapXZ5YhxIlOmvE+EWOrqBWYp84iWKd9Pv8cQLOoZDsl5a7mMFUa540sZZSX\r\nSPcOhZZHiwUdUVEouwFBFrG7imurvh6HSHeM60yjbXaW6A+Y5x21zO3UNqm2\r\nIoAkKq7TOFqXYko9MKLGmsMXRag2Oa29VfRITaikef2dWHzvdWfrLIMtNp10\r\nxTmUBRItFc5RhT6k8znMl3CyDQj3QIZ6cR1qtU2urEcTBFPPbQS8QeQc3FbX\r\nlxYp3hFF0N6GGrR7lhyXfs5+2FGZ/bkjiNDK8NCfTs4OIS6faS+87Or1SdG9\r\nPyq0b2pQwRBjWeNKcAkd/UXPZYlqGA9/4uDttYkNPA4Snr3v9G38IDYzwo/5\r\nHxHpuNIa4TSh3txQ9cUO+rnLJzVQ7FspZFx2zCG0FsWg+js3Hny7q34/e4Vo\r\nzO8yYvuc18O4iPOMGveWRv5+TZFhlG2wqKjYK4lDCT2T6oDI1BXt9RqjF1et\r\nvwaah65U2bc4NfcAMvHnMHoP4saal2HYZaI=\r\n=eskY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.8_1650555476066_0.9684867987464805"},"_hasShrinkwrap":false},"1.0.0-beta.9":{"name":"@bodiless/youtube","version":"1.0.0-beta.9","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.9","@bodiless/components":"^1.0.0-beta.9","@bodiless/core":"^1.0.0-beta.9","@bodiless/fclasses":"^1.0.0-beta.9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"14a18c1deb417ccdf6bc9bb2d12cf42bae814b83","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.9","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-ibZUP1APux6kX6scg0jML14g0GAxci8L62RktPX4WZz0RS7nrw5TWdgfJUJe/u0OwwV3xXGu4Ncd8tiERdy50A==","shasum":"a82746a5eebede55c18415f86ab497e3ba47f90c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.9.tgz","fileCount":22,"unpackedSize":229660,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhhe/uPEmmCWkkBVeUvp0qizVF5zo7wGRA6Up7/zxR3AiEA4WWqaomkrXAbpjJgTpDeP4ema+HYSK+Fv6OcHXGeNB4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYYXpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4lA//e+3tpRg5K7KKImoD/nlTlWqXiZwq6uFzwRvHz4dHFD8DB1YY\r\nAhvp7kZOyEKm4BoOzhHmXIZhpWz83CfXMlQwApihAeEQXT07SBdJIMEdYESs\r\n6budi6lSLi1NRiwdrQObILNvYyU/QM5IRqefMu/HZIb1y2zx0CJ3eKdDKlGI\r\nSFz7IUiXmxNYcISZQuKUL3iOAgRj3WMQ9hT35HMCmnJwAjZGijxVLTWe6y78\r\nA0RWafJ6KD2u+yVLLsz/4DyapSa0XA7VKZaiotwHBkWYbBQYk3EwBpcB1v78\r\nml8EkL32ud3uyVDBpygsOHBC1IJG6DkilG+JHL0IuJWquqyjzmz1GxpHLTpC\r\na+aNZdv4lVeIzw73qWTkboa5y+bbphzJOk/3NR+LjiRUJ3eQ737DS8QLYifV\r\nyiYrzK+fREtbMKXX60GEzP5HjDfm8D1RN/LGAkPLolAbWQxJa+k+c322U35Q\r\nHm4CsbNZyz0sQ92xOSfWLEnYzsUkUpv2zvtTgnQijBLExu8BUA2/+b4lIzpY\r\nme2xg1LmXMQh91+/NP81U3M414yQHsO2oKtPGfBFgoFlJ4UVSqLbQ/ztNGPL\r\n71nHWS8q0P9qQ5vyDYXNvOTjZT6b4lQpRDE1edTvrwQlxBi1qr1ahoyAw2iY\r\n+FUnS5FsTf3N1tm3677mxsces4d6MHWMYdo=\r\n=fecx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.9_1650558440708_0.07577420696233705"},"_hasShrinkwrap":false},"1.0.0-canary-1553-8.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-8.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-8.0+ab66bda","@bodiless/components":"1.0.0-canary-1553-8.0+ab66bda","@bodiless/core":"1.0.0-canary-1553-8.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1553-8.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-8.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-vHIBBRryt+Nszt8ob5WvO5B7t25wlhYL7e76DA5xrhIH0wh3lkEKckZ9rnN0Pr23OwPY+owZbmnUVleveAGm2A==","shasum":"aa5ea1d18c4659d82ab9359a29b3b47e473e1234","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-8.0.tgz","fileCount":22,"unpackedSize":229790,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGerYqr7RgHDyrgRZB3Hr0n0regaNPZQUdIm3BaHenxvAiBx2GTmF9eaemYq0Xk+DsF7CezXnv+wO53YopJazWyLIg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZvpZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlSA/+PhJ54/9tzfwHTPZgfhCwHqmqnpnvkPk4f6uiDq9+xYuqQF7G\r\ntIZXMZemCUogXHdv2oH604cv7Pb2vBldclepMhd5BOvgy+2nZYgu4nJnFmW5\r\naEQsBsG9dspf21VGn2KifhEN7KuvFcOA1IEh9csKqV4ou1YFhcesO7IdIu5W\r\n3MjG5k3MUrZTsJnARKANvJC/k3ylpqHIDBKbpYRb/7EIxiEy2ybDuFCOkA5l\r\nZXwVIoM+njclKBoKZ7GIgmzrPeESEvtA+HKopfeYc4Sk8ZWN+gGCXsHDume8\r\nG4wIWudRc23M4hu0d5l65EnHNzUZ65WWXzx+ziZhWf/+8FHRRzWR/y9R0wza\r\nSqgdmZG+0y37dr63Rcrb6Ia8RoVy5Bl2jPZ+BzeXyQGLfEju6ViHOQNooF2U\r\nj/8RvlZYJqNJ0HJyilBwJFlfV9/GNsHky4IjYHaeWn5TdkC6POJTSLYNAGF3\r\nZAqq897O1cv5owDP+rn0D1YkUtYewfq1qAmYV4mZEUIG5VyCNZs9niIFMips\r\n4RjDNF4J+jjOTv0ealv4L9xjbCsNfBJtwvhBYwcVYo4cdNfw2CilKMUjdAhy\r\nP3O0xJRVRffZ9UiQYvIWeWfk9pb1IN00SGKSlW1kLja0puWCZdisw5w3LQp2\r\nk4ebmCV5lRFTq0GoWNtAA3VuTC4XDCPf2cY=\r\n=wGIs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-8.0_1650915929363_0.08819335232336778"},"_hasShrinkwrap":false},"1.0.0-canary-1553-7.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-7.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-7.0+ab66bda","@bodiless/components":"1.0.0-canary-1553-7.0+ab66bda","@bodiless/core":"1.0.0-canary-1553-7.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1553-7.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-7.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Rrp+aVnWIqFKq3/rFpB+IbvhPuSl14AtFUmS4wuAPZcNDQxiSN8KxZTAxCKHavqj++FL/4sZIThfvuwRyhRW2g==","shasum":"06a31ee5dc276a4e5073d9b38d26db3cd1eaadf5","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-7.0.tgz","fileCount":22,"unpackedSize":229790,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFN0iZRUNwJbHp8aW9s0VW3z2bAwWeEKrCuR6cLUTL8YAiEAj8ZdwZY1+7KU3X3VH/2ADx7N0r+nYXOC9QCc7NRRAkc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZvp9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdNA//QvoCSJt9XVHM/xikya1FfljRsgLT7kKYqSEzhkotdzXCruwa\r\nY20KaXzcoLmNFge+EwIAA+1cH0LWyTXywEFf0Be++wcoccMcispBMDs09pCM\r\nz4i44S7Y6g9ClFWZ0pynihIIvtxiCbaadees1ttpVA2mqmwNKNbfBLugiCAF\r\npokOrPnnXZoS4WpPJSGO3c/rk/qIHOl+gxcFRLR2FFJNqg2PXYv9BIASdU7P\r\nZwqNHMs7n0J2TwrQQb7bdSB0GbH97EVO1lyyICc6BOQcB24BvJpy/K8JBenJ\r\nCY7hhSECRPA74E6UV36VH2dKE3F79r0ZDnH6PQgbg+EseqaIwJh3vrawne2S\r\nZRkjvdZCE+003Aud4TVHultBnZxp0MB3UHpUq83canzh8dQjP2lDhhRbOe5/\r\nu9EZeBontSYC3ZwhX3MSbqhV1GrXQcaYJQJwznXE9q1l/vlKxlQU96qb1ls7\r\nkexU/PABr80FtZkeKxCbdydXE3Y/WRJgMlBE8ebV1ysNf4DMNTGRGybcZkBe\r\nWM3NV80JkjnD9atbVGzq75Rf20UNSjonb6/khqQrAwT2akDp8PX1UneveOgr\r\n13kl02uPOmtCdXGkfx/8NTp0aF33q8HLeicAHh7f3fvBxObcTtm1xEGBWbRd\r\nOHq+Wa8QiW8vGPsfMClvf64MuAcherAunbc=\r\n=PDGJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-7.0_1650915965032_0.5400662408074848"},"_hasShrinkwrap":false},"1.0.0-canary-1636-9.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1636-9.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1636-9.0+ab66bda","@bodiless/components":"1.0.0-canary-1636-9.0+ab66bda","@bodiless/core":"1.0.0-canary-1636-9.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1636-9.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1636-9.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-RU46bP2uMqVej4rRrCgzO+ISVnJKPv/umcyj2SRntCa2eWMXsnW45fq5NJytXRlU4HnQhDFCk4OKDte9rixBKw==","shasum":"32aacf8cd4199283c547369a7381f1993cbfaacf","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1636-9.0.tgz","fileCount":22,"unpackedSize":229790,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNS57KpWo+ZO2f4PE4kSUKEkSswtsnkwOKk2x01E1toAIgQaQ9aF2bP4csWC98VwiqjU86+uq5olFG4OVziCEhkNs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZwt4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlhBAAlRM5V9SIW4b3b89qcK69sGRBP78yMFHjGyfmkJ0NisIcR9t7\r\niABveSGPaa3Mk+UWpJ875DzmD/tB/95H5Wct1Yia5BE7zcM43j4vPwVaT5Rn\r\nSxxlOMdMrBJEgksPMEYj6tkB/oKul30Rmlm+2RjA7L589F7ZbIGfUROUP1MU\r\nuuPogBiPy396x1nKxkNvcon6COdZxSTmlPVJvYTTosrS+ZzVzyIlra+Gu0Qf\r\nROLpzFxjTxmhrMO9U+g01qxk3PRS7XByI+eMzHsqmamHZmr0Etv2VTTAqgdl\r\noHKbS0tDsD2hojAiZZFt0nxj1IlNwZf6vokuXoQoJ4zJiMTkx2Lz7UzKOaFk\r\naLeF4DeA9RUL9YWnql4aDdpEIEYS9nOPJwEbMHm41Ca4rgE9tfCAPDlDK/BU\r\nm2lh5qrw61q+6vtZmiqXh0VbOYNitu4YeJDNiEuv3c4KgTG/2S4BDFqHZK5v\r\nXicymWUbh/a2hEKwlIuVJvaYXAuW/42wSe7rRFz5+KrZ74lRj4cRI6HNQbYr\r\nFgZxuV9OGeQXOk7gBXbkbBv8cEfBIJpeg6RjbDgtHQwJy1s5vuhqZiJCfXq3\r\nvkLt0goSKHA7+kfgKRnriMqzE8OyitCLY9iTi3o+fHvjeFlRUbcKAIpw8vJl\r\nDEkt0wYxJQLcmkk/00YXkslorocwxfcoHVw=\r\n=WapA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1636-9.0_1650920312012_0.06803555521775251"},"_hasShrinkwrap":false},"1.0.0-canary-1553-10.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-10.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-10.0+ab66bda","@bodiless/components":"1.0.0-canary-1553-10.0+ab66bda","@bodiless/core":"1.0.0-canary-1553-10.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1553-10.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-10.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-B1vynp1TfsP5iCSvkijkVs14hLZl8Jiv59/3Tc2eYerz8rxfzySaiEdVfJMYNKQMiLoAZ8od4QAJQjhEcn1aMA==","shasum":"7f1f48b14798883d54620c72760e04a9a1f6b22b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-10.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2nAJTdcKEZfoisj0MfkxrYV7uK/2II2ewOsSDAA5euQIgetESoFTW+jyMIMtZ2DLyyXAKi4wRhePXv3qz2f4xYuc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ53lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmok9A/8CrWqxTpjO/fyLKz1I8v07p5cvOL6NgJcmn5mAD+/YKIO9gGr\r\nhOx2nJCia3oF5j7IQIE89ptC/Sqwvk9OO7NxA7U7zLwRPWaKz8p55KIha0lW\r\nlwWx7YPSHLoO/73LOEZwZCcw8HMpm3a3cg5b5NJOoYjaAOzsrmxVs+JcnR+7\r\ni9066esVHy1LpYeNxPZBaH8H7AxbO7KASuzNOyKPDBBfl+MIk66hXblAWHtX\r\nYHyNVCxvquyYxPy2O7r9VxgxnqweHRTo3FDn74GqgQmVq2eTw/ahKTVVKKK+\r\nYHGisXdnXCBe5du1gYiD6ynAqaDq5TOVDrY7v8APpGvN2dJEWAUen02qzn28\r\nhaDU7WVdnFpVto7PX4PNCudl5qOvDgJ1ee3FfDYMExTBOxLrM2x2TIi0vNVs\r\nokoVzHsjP7Wzdysxcx0msak/1J78xKkz8og+nzdh6h1sHupnNwZHhWOHXpv+\r\n7U3GYFYZJMQ643wlCzFvRZAvK9TRZZoW7jwJ5a0FQzdOhBOUDfOtqW5c0ykX\r\ng55fIPRH6MFHYNQIUAd3w3QkdoHI0tB2xrlsfl6i90hYu4/bLJyYPwwIou/H\r\nPdmDk91v711jn19vdh2nEjp0ZROcJ2kSyzagf5FX49+BZKU+PrpcG2aHB25D\r\n3XnqLwBgRhYYa0e4F5AtBDcTFxHSiU3+9K0=\r\n=lxin\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-10.0_1650957797047_0.5560143071890378"},"_hasShrinkwrap":false},"1.0.0-canary-1487-11.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-11.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-11.0+ab66bda","@bodiless/components":"1.0.0-canary-1487-11.0+ab66bda","@bodiless/core":"1.0.0-canary-1487-11.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1487-11.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-11.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-VjcBePNLS2kRXzIgzY7GQo865Ibm3zX2I3mC2g5jBFB3LpufvRLSu2NsX/0MYhwS3HvKeDIbgRER/uvFlGTk+A==","shasum":"be9c048cae8f9d2a34fba123ebafaabdcaaaef9b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-11.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwg2RvjjJ/HDco4iC9FjM2MJ1jZShWQgCpPmvD3imixAiEA/GP69a3yXxnBHs6rznLQ8RWsuOfYsyFstbR5bcWdOBk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ++jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA5Q/+LAMMfUcQh1KM6GXn1CYV+rkAmFJu5yvlrKkxy/ycY+vYdANB\r\n72jQTGOZ7n8D2rUx1Y1jf24ytXX5srxc3vExaZDEkA6B0h5xg8fBkvHZNt+V\r\ncFgojWUoHUOmkUtiZVXofU01gOjpMMQiAvCchv5t3SMQTLY3+VkRGO7rrD5c\r\n+T7bGUxYQSjRESgMgsgYkl0wf6CCux2xF9FEuWBqvUyjG+ZIfkgKsJzfzhxi\r\nu8mvHrDw3mzH3H65J91bvUU67MCj6GykFg5+YirsPl1ovHf/TTIO0zppfiQq\r\nc3js9+r75qPNk++5gpy19w5cHrZ9NhqbLSyDv6eCjvTMVgWQ1SQOG0wp9a2r\r\nt8bY95TwJONzF4fOxf1DqHc4FtJSZbcG9LDsu9js7fHmnEPcI2zUO9LcH4xj\r\ne3E3j7mC5U5AQ6bAxYOkmKC9wvUmli1+3BiY//ouhlbeliZaEwjN//uteSRS\r\nlV342WHH0vbdqNWPRG+c8DoIYBkFpWFtMSA2kOP469jvE6nAjpcHYfX2eKIf\r\nj85+K5JNSDYl0dUZ/lt6CVYCfpnkd8+b2WXxI5XIXQrXW2mFHaNVOIr/0yoI\r\nYa6lfGRKihwjEM9Kif5kFMFoly7DBHOkbYTcs+V7fpHQz/MA1AGA1l+IJG7P\r\ntgQChMzEzcDsk+vjesS3govqeJd/cw7cO+g=\r\n=FBhw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-11.0_1650978723378_0.907169835359861"},"_hasShrinkwrap":false},"1.0.0-canary-1487-13.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-13.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-13.0+ab66bda","@bodiless/components":"1.0.0-canary-1487-13.0+ab66bda","@bodiless/core":"1.0.0-canary-1487-13.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1487-13.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-13.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-3XmqoGNkdBhbwYH5eh8VaK0K6i5GPm2ilmmZXUDQo1i6FfpETCrYqVlTqleipbT0DRg/0BM8WI1k9CBfGJLW0w==","shasum":"1f67bd344f991dadc84b9ebff86af4255c453b61","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-13.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoDAzwakQ7Ff7SSq96RB7ET9cG36TTTmB6ibomYjEpOQIgarDKxPMdiszHA5sBFaXQiszzylS50UTe7XKzpqC83mI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ/GSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzNA//WLfB2kTdnr8bmqZnJg1efTwJvGBOthlbTwDZSbac6w3LCvTI\r\ngWgfsDVSV4imTTrti8ogo35Dw03PrsQMwXHTfRd1nMrkeedwKdrCA/Rdx80j\r\nMzF7/z8L488nAXOH4ufNsA6tLYZcyR408J0+oi2GlBjhw3iysXvJU8q39tLV\r\nvnpAl58/Y0YeTipxpW3j+h88K+Ma8kY+cB7JX7YmQW21WLKP7pu3Mq1IW6pV\r\nFKWxW6b9qitEykbYxEeMlKE0mxjdiASscWn4/wMJme8+oWzNhhlrWRuvS/9o\r\niJepXmYso3M8hzpeCKlwJ5GHzonZcoDozMOfdD3Qjo3tKKT2WdKQ5SntAwv2\r\nNpmRkEw0osI5DpD2+Lvt/H4qRUA2uwi62/LE+DdF71kH2RbZCrqXvJT0eeoy\r\n4eLFcnvdd+Xv5VjBjZWeHHOmgHZm5O2679hIXxNLF15FaRGsUOdqicxrwmPC\r\nBQHpurW1uYV3W6JaYFxzdNu6t+lNZY+ESSbGFKlpfhqE/eYPVwz+dniq87ey\r\nNQ//Ip2V7TU6f3ml7SBcfjdiG7431U28F2jqz1u3xq0caXNFbDgFgqvbHe/X\r\n8BBhm6EoIEoVbLVMsYKYJSoZw4T01Roq4DyXlSHTjR41aLX0rwZ35T1wgCCW\r\ngmnWKZJjGzrjN+c+YI6o7qJ6r2w6yI5BN3A=\r\n=NPL1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-13.0_1650979218709_0.8194322051657457"},"_hasShrinkwrap":false},"1.0.0-canary-1487-12.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-12.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-12.0+ab66bda","@bodiless/components":"1.0.0-canary-1487-12.0+ab66bda","@bodiless/core":"1.0.0-canary-1487-12.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1487-12.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-12.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-1NRIyrhBFrXoJ13pkelxzv7pt/tW8OSchmDGxKlQ3B++pfVh09iyMFoVEdwyNyS6WXCuGtKi+0goy8DK/9k95A==","shasum":"c1827323364baaf2049f0cb6cd9431a7eef387e8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-12.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7PBc5FOvbbRofKZLRxEJEvmoPZoXyiOgLq3vyuqr70gIgVeGy26gPMgyMm/TQKvo0Dhm4C7BQi9cFITw6D4bob3E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ/GtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolOQ/8DhxbXrix406caYOBdFko+DPszKsBqCB82SoeAn9blWM+xW5i\r\nlEwwhCTIaW6FprjKUTnjq6isEtWx/cHWiK6fjCDWHjxbhrMI9qSZ1Y6Unj26\r\nUpwYKgm9BA034w8WdtPlyI+tt7HElHgFY5l2QDlBZW3RS1xoG2zf7UUfM/qT\r\nIGAYOz87eVoga+Bz7VR3ulKpEmkQ0oMt7N7pW8/yw8P5x0SJAqIc+Xo4f8in\r\nrdycP6t3arjarJkT+b/X5ceYU6So6917hC7LnRfp183oY+qDkQe9b4SjPayI\r\n2o3QLBkYZnVmv1hzIHgT+9E2lSHpOopQDkIhsgODutu0Ap+FuGSWWGT2j4qT\r\n7FkalWQyEJYWj/7xaz7ObBUHnbZkEtp0x3+fx4jgDFaNohGQOVw33NHqTFNY\r\nhQSRy/DNxtmayRhrgLyoM01ocDXbv6n8WLHeQPOx0dF/pSeCVLlWmZ1sbWM4\r\nKwUitEM1JFrVIxNPP5ySiRwl+80pCFJNKTWcvSubiTtjNUq+NKi5iAhketqN\r\nOxAAqmtWYAW5IPXX2n1ts1hPQWhnZQD45kt9CZTDjXyB9MKMQgMtTN7+y6Ym\r\nWnPMSZ9E48CMC4J21DXDb1EqlQbrSLrPUNAFoGE6BAziXeybqye+QwNbv+7e\r\nowVJs+tOtWEN6Q9B41BfQf3j2rvY2O3VE0c=\r\n=5Oik\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-12.0_1650979245475_0.05883448073467057"},"_hasShrinkwrap":false},"1.0.0-canary-1553-14.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-14.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-14.0+ab66bda","@bodiless/components":"1.0.0-canary-1553-14.0+ab66bda","@bodiless/core":"1.0.0-canary-1553-14.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1553-14.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-14.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-eurgPLR6IY09suZhsiB89vpNNzcq2K7FlmZ+3h9LyNjJlGQtenGmtKqg5NmyT7qhQfFvP7vGeWF+In8ulxWDHg==","shasum":"fb3e5be1faa769f85e044fe9e20c69b4e726595a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-14.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEsSyauzMIONFGd1O6HeP7/ye5tsY6x7ipMgPGcLM7f2AiBaMBVoXx7laDVfseBOlOjcSqVSGleqeOgW829nrk1F0w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ/L1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowuQ/5AaIqX1oidixn2gLWt/8ljGcXE1p16qaVPqnFspvmYsTOP0VS\r\nglPuwZi0JaUv7RFjVPuHA5aIuqPwUY9V9KKnnUTahjaWTkyxj9SCCaqaUDPD\r\ndugT3Ar2OUReR1vJi/+xX6qRJJJnsAwey+CBbJOTj6z//3EOV8rn7F63hRh7\r\nJv7nlz/a8HSLmiiugIR2Q9Ch0x1nGjbvV8B8FwBmzlwIad/tkHskToQfab5V\r\njvlf9HfZzgVVPSp7xnkGqw3LLRg50BwXCpb7gNmRRYtKEHEUdhqxSgmoDRn/\r\nCbQgBSnMmJ0WAjfFGJPYeTvF8SUUxTxXUE8N/tcHWqtYsO4+tiLerZ/5XfQa\r\ndJcH7EJ4AiB8AMWUS/qbpoyC+cLcKzO1XPsT883RWqIRLZW8+9BiOMoFXtkJ\r\nbGd4wmIpCE73lrGOW1oj6CBxmjbwwFdmMafJMT5OEs6RcIE+YImgsL4mwq9I\r\n7iOAgd7hIKouqzbjUIob7GFALGQddb5EBZOqmgB3/hiLcVB4QnvWw50BBMSc\r\nTyNpclaTv3pffXSId6fkzNIzsR938D6XPLIzv2AKkA4nbkFM0oCKCRBSix2Y\r\nu6Lft8P8+b0XOGZ7c7j4DlKhQ8/rAAc4DzvGuNL3OGX1UWpkFp1IZ7QwbRm0\r\ntIxlDQZwoQg9U+6gn5Jgq/OWLHmLExsMk0Y=\r\n=sOq7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-14.0_1650979573090_0.2348034622733588"},"_hasShrinkwrap":false},"1.0.0-canary-1487-15.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-15.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-15.0+ab66bda","@bodiless/components":"1.0.0-canary-1487-15.0+ab66bda","@bodiless/core":"1.0.0-canary-1487-15.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1487-15.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-15.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-YoK4lesu70/yYmrhHPn1WTVUyKb2welFVYUy9reIaWQq/4rR3t126ZkMN8jx1h1scHdTg/vK2wxeJ4OmVKlOpg==","shasum":"c2b581ba1575085ef44c87302fbc4adef7b7a0a0","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-15.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7Dyyx2IgXK4tCeQ4+/D5bC9T49v3IcuwZKare8g53SAiAW89x3EqeHYZCubPcvetnS48xhQziv8NOGaydZXfLzdA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ/rcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5Eg/9GZLlAJTW05ceukfdjaTV+iGUlWFVw8u3CoUw6g5V+RObztrM\r\nlyb/I6eHTqrB3mYEGW6gSn+kzhxkXdmebf98DoL74vekbV4O+hAahqtSwUwG\r\nEC7fQm6U+A6PiTcF2ep+HCmjc1Oy799swo/SDRvpW90kSDqys0Az99fNeAjC\r\nPwN0y0Mlt3xgIKpKHz5rnWu1YxzLdQ2OeAWSsh+1KXUebZSjkmWgl0Bq2poj\r\nfi45rE3JMeaMJkPi7QzSWeAVIpYBn4yChuLlpu1dtWJqw2hzXe2XqsmnPmJt\r\nDIZFRrbrs1tIMRg3+NjPHfKQDrSqOBS/LYDQeINahD+ALowxxeZGqo/Ks/mx\r\n/1O36yR35Y6VFtfblbNmD99fyXMTdVr8IwkV9uzYk4FfztiOcrnF/EOJ2zaW\r\nhVHLUDpUHLClliqFF5BFu/9YE+ksEd5fB/nViSgdUKoiaWlFZDIxfKi26jkf\r\nO8omWT27h6rvE+OL4/lJlYbyP/6O7abZo6SJp+S2HoMhXLFOtOmD+/0r3vVm\r\nLucVl7YaM65Nxo98InEr2qcN0HdnBomdfOX5IeX3uza9k+xCIKDwENJIRtiE\r\nQKTatrbT5K+Tqlk8Sni4OsoFh0kgimhvdXsp+J4RmxGzTXPQXHxfVCGFlBO3\r\ntCi3qmfP9nM7eGD/f6gHabq+bBDMwgloHqw=\r\n=aKLI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-15.0_1650981596068_0.833201911727588"},"_hasShrinkwrap":false},"1.0.0-canary-1553-16.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-16.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-16.0+ab66bda","@bodiless/components":"1.0.0-canary-1553-16.0+ab66bda","@bodiless/core":"1.0.0-canary-1553-16.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1553-16.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-16.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-yPKAEZMt4mMMDH8OxkLQ1iuNNdl8n88fZMQ6SIuXYkd5aqw0p5I1bjbXkBBdZWiJGXj2Hl0GVS1CaRm2x+qP7Q==","shasum":"a54f280cdc6d9445b481d738c2662590bee900d6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-16.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVHxefUwh31zSy0K8SK96/6LoUNb1AgkzT4jjR3uryJwIhAJuCmXXjtZmPACHDOjp23Ot/YCv3gUf7OCzMckK8ISWh"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ/uAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNHA//eaeosbCMXD+th99wi+1L7IAeef0G8s9jk8MJRfWcukhlcmaN\r\nLTMw8Zb2iBjPkX/BqevovbutQDPoHQrfHOtTwDlRub2H+aEUtgASEbxNDQvb\r\nNuxXCJTLF7u4s6s+Hh4Rl+cj3H4kPTZ1+L+uRd/RRzjdbKJ2z0sx+dTXRDU7\r\nbfDT4OD+6lJRbxeTbCOtX51cFGKlQaVcxxudoHWG3OZKMMeR0fTAi7vA8rX0\r\nUMIBRcrjRvVlXQJ445mk6PceIC423KSK3SanJfqqNx63osmKCG+wv7TwK3Vw\r\n8c5mZmFbEZZDED4Q1a0I08FhoZVIWJKyYT1xylixpLLFVsqougXncSkzu+Lo\r\n70OvafKQhyFAU1UetmytmmYxX+jTqs+cPlWV6ONBeIgXUloi2gy+rMUUbjx/\r\nKqvqw+Z7HhkNLdw3ig2PdlrJpdq72LZgQGyTonzLIcDSHVk4vhmLy875TD2C\r\n13QwsYxCc0baV1EjqmZNcOB+IyWiEm0+0muwEmDBBNPYqmu97Frti3be19bK\r\n0Bk7fqPGeqxdr8aeaUk0xGTz2c4nGHy/QB1AFU2K47IvulRCXM82xj+n7FhD\r\nHwMHqpBf8vru1GoZfQ5RWIJg4zH7DNZvMwAs8EQYVcpJN92P75+5inc/pdUr\r\nqV2c3mhlN+0oBaKw5D6jlo/WHFndwRPgGEk=\r\n=3QNW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-16.0_1650981760168_0.7514718938302107"},"_hasShrinkwrap":false},"1.0.0-canary-1641-17.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1641-17.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1641-17.0+ab66bda","@bodiless/components":"1.0.0-canary-1641-17.0+ab66bda","@bodiless/core":"1.0.0-canary-1641-17.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1641-17.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1641-17.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ocUDuHW1+Wcyxnh+rsfYud1jqYfqKbDfDgZY7KqKpZNkhtAKPA6b9mIJFmGRK8AoiBOu43N4yVBY3SXmRfNnBA==","shasum":"221ffb7e0348a3f7d3da773af0d53a923b3a1d3b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1641-17.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPbYZXgUqeriQjNoxIYj96tRDPGJuQaAKcCEH1OCWEmgIgYMRC5LF9bEhb/Piz81RfMpjM6j15LW3kVj3ynt4/m60="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaBZ5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmDw//RUjz871soSWCFBxzSje7xhF0Chf2XJ/IhAzaOM2Dvzah8TPF\r\n4fyTYrhqg8Tw0rarf3lqLtiZCK+BLzxODTcrGKok1Y9/V9xCvnJtH9hsywaL\r\nNfaB8sy8zt/ULGCDV9sjs8I6ACWGiMfHg6Za+dxmKd96hFGpCtKwOpfHA31P\r\n/0r/FgDT7sfYfS21/kZoI3PI8/2eH+WU5VN4w5uNM8V+U6NhgWOfzh5QCpDX\r\nJdVyrzgu8uRmXbEEGBuYzy5w09XFe6P1skFr68kIxu0jNAI7ZKxkbv4pYv5D\r\nwywdt6SXcEz928UAwbRmGmUzV6A415n+0LYSDoIjN93Oxl58ttQi1UQEY22X\r\n5g67rBuOpiPITIEYBpdGKWtZqUJSFo2UtFx1qIXWqdqGcd2DDTzNoiO57v+d\r\nznn7QtSdINF5giaeVs06aN4bix+hZgCRWoLiH9cI68YzQeSQbS7ciuINqarM\r\nU2b0F4ooKW0u4YwSplBRq795jYMurXT8gG5eov67jeXQDhG0iab0AF1s2Sdk\r\n/stL/CQaxRDk7cIYlLRvPPn+tzoCyKVuMoUZTheIjXY7tr+JO0b0vehGQpTc\r\nDIpi5BtnTVjprECIdWN54qqq3Ud0QCDdiI0FxLOhFV9XZ6KQ9ilDwF4jmwiK\r\nQ5DFweW//fez6lfqVXxO4I23BNIZC8InVQE=\r\n=0Xu2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1641-17.0_1650988665241_0.9064482572828654"},"_hasShrinkwrap":false},"1.0.0-canary-1553-18.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-18.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-18.0+ab66bda","@bodiless/components":"1.0.0-canary-1553-18.0+ab66bda","@bodiless/core":"1.0.0-canary-1553-18.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1553-18.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-18.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4tbGcko9PvA1ljP9sduj8NDhA0vb8bJvUxqu9wr/z38WPPEkV2D53ac90jQ+9omqa3v8avNoYT3HJRBQs3RqjA==","shasum":"c4def9e404ea4ead38f867cee37fd204d8624ac8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-18.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6yxRdiAtQweRGQ/wM/fSFxadD+X1IDp0QLNu3AlnsIQIgNZG1KjS8j00p0TC5PhIh6jg2N+liMUu5zEVcENrx7XA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaBfDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfXxAAlT6fvIyU6Vm8/CTVRXOOrLNN7UGyEfuFIMYZIZrFF+qbR9Za\r\nMqqtoFuJyRum2ZrVSBOqkaZGAaace33sOXbLIPea+b5Gwq7tH4VCJZEsEfQW\r\nyyVBK3AvE1azCevJ4UUBZi4tNJn0NtcxAWC+bC8bn6lJvU79ptixlHr1zEBa\r\nUSWAT3vabu3aHbQ7jl16MiWQKfLaX2XtYAECKwiJ2u4GET/6f/AX9qHtQUPQ\r\n/YyiiHk+TJPO1UShQwMWCK4zkpijRRCuSPL1ZS8OlQ+ZeI45AMNrcZEn2OiJ\r\nCHgLcIF3HGv0/rsA49zs87AXXCAKxSeTFdZJNRDoexOPFEpogGpXDTZ+jZFW\r\nR3IY710haZEUsbTpY0jFiuFMaInB46CYZsDwMRUsXsCyM4vpI/3rbeAHsFgM\r\nutqydkEByynlCq2fUSfPs4njaWtkWXCb7xoM381IDtFT2R5c4TbaszaVFnta\r\nNF6OtaPzr2Nzdns4h9QlUaMpNsAiwrewe4hSeK0k8WOrqoSRx/xcxBO5bu8p\r\nnpLxIKD8fkWnyV6vCD1/Slw4jYMuXbIevAXl6qlMJiKcNgMSLBZODTiz7kW0\r\nY+Zg2lZAsRjfwqxLlWYLCyEi6UGUr+DvzRw/QxlwtFWPRhjyRCyTReuZjAQM\r\nhBu+2+RKpP8uV9pZuG/sATdLHx48q5oVyE8=\r\n=Fqbq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-18.0_1650988995250_0.8293499137643283"},"_hasShrinkwrap":false},"1.0.0-canary-1553-19.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-19.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-19.0+ab66bda","@bodiless/components":"1.0.0-canary-1553-19.0+ab66bda","@bodiless/core":"1.0.0-canary-1553-19.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1553-19.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-19.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xSv+QqFKq/FJwZ7fU+zmsLvcWxSYjsCVkBw1jf9hvtV+EFUFWZS+jGClEB+FSvwdpfu2A7s3FcutW5XyRjlK7A==","shasum":"dff13ab882c9f6f504d5af729d819a17ed97ec13","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-19.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5cqgxseFFD303ubGjBxUtjmRnPU4UijisMX4bQRikRAiBmE0NscxQe6pfX6LK9niZpYk/hscYHx4mK0kCjfd87vg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaCelACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQfw//ekH0xkAM03UrorshRp2JZx9kOF5Pe5gQU3YxAOqelLlptIvW\r\nZ2hUXHZEqZTgKk6fcrWvI+9O+8LvyZMd7aO7x678svV3fJnnJl68DPMZpMg6\r\nLZuJeH7ZGkQ3iji+AysuDo8P1Ev0mTdWr2OJY3zNMQYFjhS6efpFx0TBRXH7\r\n+aGJ9RdGKEz20MovpXugrZAoCJ6hljdaHHQjae0dcwJSfPvVfL6E+5mqMRR+\r\n/jrHHsasm5NoEaiUXxLywRLNZloCIG68LQEmilk8RiVPlDXVXTTFkEBCPq7n\r\n/hZRfJy/M7rMekO3f9dnaiBkFN0qQY+Ztw6oEHWF/eVWAR7nrhCJqm7juBQs\r\nBLlmyxzrC+i5sqrEWAWv0XR6va999KhSS3ehP3bRbJM5e5MdcATNZCavfjbS\r\nLpdi3t0TXcABeayzvLXWVJ4PB2qHYhwJ5Ymo82J1vduwY2UmN7oXVDXmoIXH\r\njoJCT4XiNX8rOVFNCC/LHKTOOFYfIswrXJ6nQFzXuOLvsTwywjzXwMPTkHsn\r\n/M5ImLu5wfJyHKkgx72BF6SD4ADPcbm6Iuqks3jFE9bnbtew2fIQ4Fe6CH5C\r\nUujrMZGQ9N8saaZSh2IYn22K23qlsM8wLR2hACK8k1LhwxbJvQbTdH6fDKgW\r\nwjvkBhOCdAn9PKaxgSyfDVgEYt+WRo7UMfE=\r\n=f2/f\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-19.0_1650993060906_0.8555528285294502"},"_hasShrinkwrap":false},"1.0.0-beta.10":{"name":"@bodiless/youtube","version":"1.0.0-beta.10","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.10","@bodiless/components":"^1.0.0-beta.10","@bodiless/core":"^1.0.0-beta.10","@bodiless/fclasses":"^1.0.0-beta.10","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"5e03fb9a9452cbbbafe6ee8df05a97cc6c3f2d7d","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.10","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-TibL9F6Szw+cB409BPMDCwo7Bs4D/OuyMYrXXugYF86v8JDUZx6yK67Kk6Xjs5oXbhXtFJr9yO8ta+4rAlRe5w==","shasum":"859a77336a43718165e28c04ac14b14644349009","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.10.tgz","fileCount":22,"unpackedSize":229665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUAVvDfaFR6ZFtwXl0eBLXy3IR0ZWPpg8zd/Kmg3C/MwIhAPAp7pOeBltHOJ6Z/1V0kkZoMK+JW5gri5sG0HxgTN+1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaC/3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeaQ//cs6MWw43u0CQwf62HZ+uGUo/pS6bZXG1V7G4QGx5i3vTiUFV\r\nEvMdkVjZYCjOdMzJ4uMkQrep4+71mUZWVoSEuoVI6nc+1YINz7cLEX2m31C3\r\nNvbtJcTX2uOsD7lqdYtrTFXhz/poguf9m1OPs0Bwgn+YvTNgVjb2hckvv0U6\r\nu6y0Bb3S6CNNo9rMlolnVJ9RZu5ZQSaaM9kQHpzDpwGUy6bvGC89qd3KuPXd\r\nm+GE0NJTgOjASnlLShUXQW1Ts8MDdvKR+drGtqwMtK+veT0vhQBQLDK6JKMz\r\nhYnGsV6V+L5Xx9vblWnzjoTHluo5bHQXcA+rr5Zm9/H3teEUeIDNmb77mUnm\r\npgwIX2LRHQCloPVgVZ14WFAXNS336XdZiAmDKRexUJ/24WaLtcBbnD0MlMvz\r\nkwxYqqXIT0eut6dJ1B/cICWjWXn9ir3WpxP+b95WoM3c9hpAbu2Hv6Sk5awu\r\nKxhhjMI8+Dn4N/sWoxyAkdkWMyvx4iFYT1t/Dx1PYiU15EivXNWOSTMvnZDc\r\nnlUeRgGds1+9IcvI9/qc5wJdFbh8P5gLk/M7VcaDHabWUDJItWUWFoWmxZyu\r\nshcvKzBwYuWJWgAvYYaQkwevZMYTLs8lyig06YVu9tybUxgpKBLfrBrvDGGB\r\nLshM/c8TKkQY7FSp+ecs2i1wa8x+DAmkhN8=\r\n=XwEu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.10_1650995191188_0.7778769693982239"},"_hasShrinkwrap":false},"1.0.0-canary-1553-21.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-21.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-21.0+ab66bda","@bodiless/components":"1.0.0-canary-1553-21.0+ab66bda","@bodiless/core":"1.0.0-canary-1553-21.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1553-21.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-21.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-t/RoRLZJJwaZgNGxCE9BpxM3TwHcnhymCbfmwnH6bZtzgOo7u4FP2/zLslWYgcq4SdFmEjkBLT1laU30I3wBrw==","shasum":"410f7f278c4eecd8b9e633b2b2e406028bc179d0","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-21.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaRxC5E4bRy1XuXNg91/XJIVwG8WK0TKl9aBjsBDz0dwIgUyq9XMxmn4Aom8x0AtLQAm63UKnTlL3+2UQX+OIoCLA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaEErACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/6hAAnr5Jv/a4TJtZDZCvxwZcqA05k/LxbAHayyRiMqWz8IyMkCcp\r\nPTDNC+EQbw0ERTH5JZYXJ5oOtuA2E8m1UvqkgBMM5kbO1mKTjiy5PxdmhCkS\r\n8LD6h4NMQIYiVvQkqffGrBYItWUV+DqUy5A24sEjx7Om5FoWoiuKatJIkJ0z\r\n80rnDNgKSQAyYkZQsa1HYm5S6ZLP3YLv3eN2vYFagc1RORfCfzPrfHxYGhIz\r\nhRq1QHTTw2sB6EPSGxu8Di9wM9fnbPEUDwq9G6BIPjrxjjVgQFXRyAZbEXHE\r\n94ages0hLP7XG4FPSHqTxYp1ynlMcKl6I9CYPvCAn4SEUN3p1LQAbCZLfoLY\r\n33A/N+A09MNBqPhTTXONYWoLBwrhIQ1eRWvv3mAbw3y81DOocwcy6uElVl9J\r\nxWlUAArGsymBMBZUTpL2ArA0g9Jbd2xVbBmL4+jfXdOfdqBUVzCsIUKFCZhu\r\nmKZVlURlUNuJa0lQiF64KEeqLUBgr1hs/ezZTG4m4pWWL+3vPIN3zdpfOOmP\r\nGSoWux+bDQLDUO0AjVTD/pNTSsm81SgXE2D05iZ/gTJR2GaNWk6/RKcsEDKT\r\nK0Qal+lYFYfQzuWRK6cGIZ1Aig8xbeRUy9qnjSyrA36KGZ/GSPvPCifI6d2M\r\nWgXsc34I/Gw8Tt4xYl1grgJEfTYa2KmZIUg=\r\n=QA/L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-21.0_1650999595684_0.9948652309885069"},"_hasShrinkwrap":false},"1.0.0-canary-1500-22.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1500-22.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1500-22.0+f00f3d4","@bodiless/components":"1.0.0-canary-1500-22.0+f00f3d4","@bodiless/core":"1.0.0-canary-1500-22.0+f00f3d4","@bodiless/fclasses":"1.0.0-canary-1500-22.0+f00f3d4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f00f3d45771c24be357b6dc9faef863db359e6cc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1500-22.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-A7Ln9cj+EFZYhGRMJLG11NkgNw+tj8xg6Pde5t5jLDB/+LPBocbQjD7938KuBAR9OS+jx5ZhrejEk/N6JTttJA==","shasum":"18f91bd25d97c028ea89aeab5b319004278b1429","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1500-22.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICudP2JN9qPZ2BGbTOUGasXsQbgZ7UmeuFn6hWUAuI4dAiAWaqyG6n2wBIaG97y6kC5QXtsYsXInX7epHAqrPGM23w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaE7iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonYg/5AYktoQ00MFO9n0C88+81/wkCaDel3+jKWfILiXVKLflMajgX\r\nmcesM6LkS92BI/cCLtBwSfggcRf0v9YnS+mnxZs6uA73NjNoYuw3l3h33Ze/\r\nFoCvpsFhobJA9tZobY8n6ZtfCo5zMcfhX4+b6dtClCIJOIpSXvRPCLtXZ4XF\r\nIqpgwH1rsUu4mvIpvrTTJmdgcyV7j0fMym+TBo2Jhy2ZbIRl0Aj8fasyTrxy\r\n3IiJVmZo4/bKKrLNTZUFulBUAT7bLjBgSGKcxBztxrldIObOm4v/LQNIsnIZ\r\nPSw51HI1v0jJetj2a1aNj4KN0UWbDanWcKOrP+jzyOsGF8yktzOJ1Aya/eb3\r\nT4rDL0Q7w2AqoGy1Zd9HrZiYiekp5pbAE7f70nnOr25S1jBPJu72QPYt4/hD\r\noqOPiNNKRKJ+TwFuCqs46hUMwFg0/diKBBpwLc6hAfey2SjF8di/I/wpqce7\r\n3RNi17Tyu+pPIabPL9nwtL3x7I6JIZovyY9080L1KK4xJR3abX43Uojs3Vjh\r\nzXeTZ3a5+KrdBXWkNqGVpcT2HEB42YWEMSPq3swCYT7J9x59I8J+GCl8pfuX\r\naanlaGgXqmbqgbSsIEDUQDliDlJN6wI9ACUIl4iWQ4RUwMR86BliS8piRruZ\r\nTtapqHowIV4TGhVEy7/qpm+FVC+D9iEFA1Q=\r\n=FOdi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1500-22.0_1651003106209_0.42322559587399455"},"_hasShrinkwrap":false},"1.0.0-canary-1645-24.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1645-24.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1645-24.0+ab66bda","@bodiless/components":"1.0.0-canary-1645-24.0+ab66bda","@bodiless/core":"1.0.0-canary-1645-24.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1645-24.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1645-24.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-/DuMO+RWo7cxAJ0FdAuh8mQUX3E24k3f3JD2ztbIRtJai7aWNHIVm9SzNco8WjQOsHSlMVx+7X9zfZk8muT0iA==","shasum":"e5bcf6c7b5f83e0df0009d5fe5bf07d883e9cc4b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1645-24.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfM8blelCK2m7kHPpBVxAGyiZotyG2LyXL3X+UN9qr1gIhAJ4eBIyxotbJigvdSYduSgDTzFxZhPrm3Q6j+YjXJeDw"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaF3PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwtQ/9H2pSr+pY3UyUtJPCptchYqjXQ+Otm8EAaKBHs229PTVwN3hP\r\nygyTk2Nmd5g2jQThUilzcQlxg2SKMymcwibPydrkyelwel5Rfwh89A0u4F0D\r\nRdiFY4zUTZRda3wLrpSuHE9WhQEhH9XWBB5qeYn0MPHD7J9h/LSvc6GJOhxb\r\nAmt1htQy2HY3bDudJpd2MFGlTAZBn/+3gqcl7avmbFHMqYIqFpQz/EqSocyy\r\ngRGmpoIVhX0x8xMDdEbgVJNtTi8AESymRM3QJ26seUpZQsUY1pcHFrh6/5dX\r\nKTZaECJv1qBfq2Nd6UD1WSYCN5cw6Bd8h3/74d/FHLlYEAFiSMNvTibMy1TE\r\nQQrm+uFWC6O8+lczVCc+B7b18HcIRA1w1PCiWYROSmlkoNPBRZDLWmTPxG2n\r\nifBwB9KM+n7/o1FPTWABWmYBUhTZQWwv1Ld4CJECyTYdHUGwCrliNgmBfSaO\r\nrNPmIxGaUo10WHyOLVenbSPq/FAavwtN1BywTcqsGLJO0YAhGG/c1bfIvyiP\r\nZJwOF9cvUWg8o4WlKhuCcDp8LjhY7osXPgZEzDHhz6qjtJavowgz4b85inVU\r\n+1WiUgf+Pg6ivBGPHZRGtbqNSPT4plVzMquULuStooLHcaaRGCzMhe18cXPF\r\nyAnWSR0AzTcHJFifaR5s0h/2Zc6ijBS2v3g=\r\n=FPuB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1645-24.0_1651006926715_0.726904841077477"},"_hasShrinkwrap":false},"1.0.0-canary-1500-23.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1500-23.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1500-23.0+f00f3d4","@bodiless/components":"1.0.0-canary-1500-23.0+f00f3d4","@bodiless/core":"1.0.0-canary-1500-23.0+f00f3d4","@bodiless/fclasses":"1.0.0-canary-1500-23.0+f00f3d4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f00f3d45771c24be357b6dc9faef863db359e6cc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1500-23.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-mG+8DXnzVJCMPEHWKRFI5tK4NHyLm0zGYgP9JYCLXAUtPa9sQutUOoazuikkXa9TEa7mp1iaz98K9f7EDM9yXQ==","shasum":"7435587c4ffb3d180c2020d85e3381480dbd31d8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1500-23.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUgwM7Nb0kUFPMyUcwN+6+pgo0uvdwKWGl4ma196qrAAIgMFwWzQU6RBxoJdndl02SJTcNYBlf5TgHpSZqxyLslBk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaF4FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSohAAlQlxqPzTJGWxnRKFlbNah95+5aUduiftkcCG0pK+UKYCNpQK\r\nHBPD5Gj++/+Pt3JrwuWP2+JD11J/4cTTu52Psisn1y+RPLc9IRqgtQmSdp3A\r\n1DByJOG7NOEqU2MrFwpDmZ6eb8E08yryu6dsdSMRM1t3TA87PGZLQ3YEwhWe\r\nF+D4leD609Whmp8X8oXyeV9EnPC3OFtAVpy83+nxW4Z4cnxOeH881dNdWrmU\r\nutPtzlQjJFgPUAIHDKwzAHJB7aDy+LARQKc0MrST0Zm2wagscy2bjbuRGN9J\r\nJ4Jw2hHgDrh8k/CcJsefYSJmXHZ7aIvI6kzhKSQgBV4kM0MaCfnCF7a++qgT\r\nEy4vvXl+N9VtxvYKNKWoZ5QQrNPlefUUSrjGIeufoDzbQ93niHq+lPQIj5c3\r\n9fVghp/FekS4SN1gH2B6+4D8GtotTLHl4Il9afCBrST+6Dw5QT1SNVZ5Yahw\r\nPJkeejigRN+PQ/YKXlcwaGNB2GIpkQqR+uvXIOxiB07sgRWsbgP8+jUXIjux\r\nhAKpJyESzygS49f0SJPWEOj9gMq9N+hClsok7ytGj44n1NxACFDLVT5XOHp7\r\nXBzMb8CZ6EV5AyCKzsoc7l7vlEW8uSyDTV0tp2BaJxS25A4mEYtZsjfYJV18\r\nEHw+UJTZKPxc+ui0Mxa6jhISTrVjKUGT0Zk=\r\n=ZSQv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1500-23.0_1651006980987_0.37825276400973773"},"_hasShrinkwrap":false},"1.0.0-canary-1646-25.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1646-25.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1646-25.0+f00f3d4","@bodiless/components":"1.0.0-canary-1646-25.0+f00f3d4","@bodiless/core":"1.0.0-canary-1646-25.0+f00f3d4","@bodiless/fclasses":"1.0.0-canary-1646-25.0+f00f3d4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f00f3d45771c24be357b6dc9faef863db359e6cc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1646-25.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-fLX0mQzKp+g32Luyz/Nh5PIuDDDZMyPeqyQ+GW+saAB54QWlog2Wa2Og0+oNWiZsCRySooQAlAfitmJu7AQctg==","shasum":"8e49efd61946758d22f638df6769111455d82d30","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1646-25.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHZJQVUZ/2WbBbCQLeAEnG0ojI4sQTz2wSpevsj46nBgAiEA/XFF352B7Omd9tmQGBd6LOkBbBUTiUrbc/CjHbEAeo8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaGiIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9bw//VfRetWOGYHd3MdKLqYdLb7o/JGWf/DPXwIDLf6iwr9k5u1Y0\r\nxJYjnT7a72jRbsY5LxU7oz9CXrxWmW1kuNnwpcq0OlOlt3gaZBPHqJ/nbhog\r\n/GNm4dBn6lTwG7dl3DbH0R1DDdXnh0s2GuGjeQl6vGtIxHmH4zT2CGJ6nvFQ\r\nudRR9xWZS7iDAYzFgJ6rmpC8uQD5vCiyBQ4rbgHojj3Uc4TP8wc9UA70DPsg\r\nSBhoFBXR7+52LdefNsMWldOJ1dKV1cgstbuKWUJvb2WJHH69uBJ+f7mW7PJp\r\nzsF2LY2raV+hqGuz3t2EeAqA2LtmmRTf3jSzJZ5tQ3UnCCKOve6WLHz/AhOf\r\nVWQPRQy9wkdjzloSrUt+h5HrTlkbSekkVZ7LtW/HIJ18L8MnRShITYLhfOlJ\r\n5pckk54eYlG+O62n/gQQpjwXGRS1fomMcjQfAuvQgasGtcNg8UkJ96nMlats\r\n/E+uPntXkgIV+KWgp5IyngZ7zYrX2rTew20uMGNV5LXEy8uPhqB6J4z4NNC2\r\nn+LKFPJAx8N7yjxn962iIRmy99fTctfSxaPdxdVw5B7ZL2uBN+DBgw4ucUaT\r\n/wYhYeaIGGKZOH7BRqpliQv493m0hBO86GUpEd4glVajLx/aymQCTNv9e0qI\r\nZ9zt7tSyW9Ie5nEopoP1Hs9f1/yfR1c9qB8=\r\n=tNFD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1646-25.0_1651009672349_0.18355237007269154"},"_hasShrinkwrap":false},"1.0.0-canary-1647-26.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-26.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-26.0+f00f3d4","@bodiless/components":"1.0.0-canary-1647-26.0+f00f3d4","@bodiless/core":"1.0.0-canary-1647-26.0+f00f3d4","@bodiless/fclasses":"1.0.0-canary-1647-26.0+f00f3d4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f00f3d45771c24be357b6dc9faef863db359e6cc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-26.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-+IITotANAYOYCTun4iKnPYG1POvDLn3b8Vh/bJTbo85mDebfc5F0D3xt+d6QOnSmSouoPdojfzxVLF3BORAb8g==","shasum":"707bed07cfb6a03a72ae5cb0a1206396eef0242a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-26.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfE6jhw0tDNl99Uzm8CXrOyMz3H/PZclaNAo+pFDlFkwIgf7Z2JrvKszFS55a2V6C4ygJ1fGopF7RxZD0dOLmBvAk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaGuhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohnQ/+Pp+ZNktteIKvmp+9gAKpXb9kNdaMBZz4MO47ro3Z7115YzYc\r\n4nNLMLVl1x7lUW0c48/kYov2AuQytwxFAF1coKJ2/beHLHBBerR15JHDYhf+\r\na3BnoRDx3tvmTav1wSJn+eY8sqWERMY4ZT7oWs8MayJA7AxHeLOry/s/CcDk\r\nAFY4/DdQSpJydGSiemFUOgNLLeBmSdRpZLfoV16wJlldlvTd19VW0iM7hthg\r\nZ2REwYmRHthovhJI1sp7BtbCNl5qsxgP7gX7wE1/T/QGaSbyRJHT0Eqoz02w\r\nTWv4f4JXwzGbHeat+FfEEDKYtNIRTnkGyY+IKrkVyPoZqEI7rqvvRnpTjMN9\r\nM6rSayBN1UFRXYlWPtXJzX+zHfA5W7yYxtR8/Le7HQ2CZztBi1DQfabSFes9\r\nv7Thx9fFAtlPzcf/B20QZdjZfIUjZGN4VVYWVi0acHQcsIb/Zq+VxaZ5EHmj\r\nE3+QJ8kqwRaWOv0eTUuMG5jLgiIh7BqKq7E5pAemJqcLN96savuORzy6YyaY\r\n98HtPMICrU95/kj1UVj7zq5PIwCDfOkXWP+o4Gqt1m6QSwoUzEag4vqpERbt\r\nKCbadm+8wAtt4j58Gjv+u1zgnJTp3kGpcv5JbK5cE4L0WL5PHI7JeriwAUTa\r\n/WVZ/g7VF0w0tWRRL+ulk6KtQ/A/vqqmHSo=\r\n=7Mv1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-26.0_1651010464902_0.7206897466697268"},"_hasShrinkwrap":false},"1.0.0-canary-1648-27.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1648-27.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1648-27.0+f00f3d4","@bodiless/components":"1.0.0-canary-1648-27.0+f00f3d4","@bodiless/core":"1.0.0-canary-1648-27.0+f00f3d4","@bodiless/fclasses":"1.0.0-canary-1648-27.0+f00f3d4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f00f3d45771c24be357b6dc9faef863db359e6cc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1648-27.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-NR7Rh0hjCTpVMXlwdjddAa7r4TObaS5NLo7fodtj2uu7V+D3Tub98D3wIbPmLh4OybNmABF5ksU6O9VqNwiLSg==","shasum":"6783a290f150f16fd5a76b997f27e179c04e1e14","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1648-27.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICYBUYz+PmAFoUPrFRMj0nD5eaKdC0NaU4QgYrEa43DPAiEAlKQZ9pRFoM/kMnZ2mIw+3pomX+etngwXBnhLd1z8cGA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaG0bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUXA//UTJAFuK62Dj1B1bLf5moQErIeij8RhrmPup8c1KKKgJg1C0E\r\nZLQnqM3C2fZcJCzIgMyp37/DgrewPD3VM+NRnkvmQ1fHm3BXhfbxWYdeAEpD\r\nQwys2bpZxeivAuls0XXXLuu6LEdC199+JKlgu9uQ6lO/qlyIgQeNNPuiCam8\r\naDmt0gpP5g1QUVlDsnNLmtusKfT/PYCec9W2oz/y/gNDTVzVEIkPgGr6gTd+\r\nrjgN9mHWUC26+08seUw4l1v246UsajLA7Y8TLMd6T0AKZTG5lwuYfuwM9gdZ\r\nqXEmPDoJn2VYfbR2fucVh6lZFSrY8XSUa/kTSMIv463qJHxqR6beOPAJt1MB\r\npf24zh25WeFwM2dPAzE8ciEqugZ/HpxbGshX9mR9AbvwoW1IVMHFnEaSCN6S\r\nv3L/GQRrgEIquYX0gP5nGVGZOF8OMhqpXjUTMoasv8Du3aCYkpJvaAwtzMwY\r\n6ZtGTYTOfQNA+UXhd04/JnpRudwBRnJzSQA8lKVuqRFK6b2s3GQ1Mn71ZWvn\r\nsBOJqh/oiRYAYuoqMnWm+dEwz1n3Qva1xi6Z+Qt1Q2Ds7qDJzRKdiqFpNeG/\r\nqbl7W52iJDH9HuxJeGJxHDMz6mjSho2hI3kXemYoq0U7dpWdwSYOknG1kh1X\r\n4Dz7bO2wB+bAb6ZMvEluv9YT1gCnnbYTSSQ=\r\n=OnYx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1648-27.0_1651010843675_0.3602200049056081"},"_hasShrinkwrap":false},"1.0.0-canary-1598-28.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1598-28.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1598-28.0+f00f3d4","@bodiless/components":"1.0.0-canary-1598-28.0+f00f3d4","@bodiless/core":"1.0.0-canary-1598-28.0+f00f3d4","@bodiless/fclasses":"1.0.0-canary-1598-28.0+f00f3d4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f00f3d45771c24be357b6dc9faef863db359e6cc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1598-28.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ArD3V5xG6ehoOuVrr03VlFP/2mmwdnyMwxR4V7uFRvD2TOiWVFTbcyXUxBJlIpZPO/z32l0bcHSzYd7fnZ4pvg==","shasum":"8195f37623e65a920d89716eedd93b1bd2fcdbc3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1598-28.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuT1JnfiMaQldN078lFmJX6csVqID+GP15ida4lpFPOAiAq/3r6Oa1Fxuz2A2P9+yQuy+WXbsjvm3/CcOlr+ttKGg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaHl+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP0Q//TyciP86hT9V4Qk0+Um/rjKNJ0TyA74uGIIJ8hXjvb51x0jmR\r\nT/t+17ZDgmNEgbbrTCDI+gE07ox49glmXLtOOImhgaZQabxdpInNWx4XrBTa\r\nKDkUZ9u+CYnO57jHHtx8jb2nlCrKiFXXW+JWQKVeTTCdfG/R830dpe39C1QH\r\nSlGgFrj+ArIbzDpW0dFTV8Pg+cSGpxf3f0GOK4hp8eQwrz0gNFKqaGUk7JH7\r\nbY1Tb0OYSCpDmBAshEHYMMpnN3Qpf+T4xNpj4gcWAoG5Vc3Nylwk5ls+OrBT\r\n6GZzt9X0Y7uEWfWVu4WIShVk4xHeGzl2JjKUjTLPu9Frui+EUzN3/pWrP20n\r\nS6XPs9tJ6qK1iU8y9D1JoazNFMd/K+dJezzhIM21i4sLEQgs8yqnITlsBaBP\r\naiiVw1QS+leOs1seCK3AKkaJJW3g5G4Ap90QECH5+f0GeXBPKulWiBeTNR1h\r\n3d+vldjP0r22bRbuxHpdCQxDHvjSDB3UzQ6O1O6PYD9hZDUIpAsApkVkAK+N\r\n/2stPMRB2rmxoiTh2w69KPC5vGTwT+tXpaAll8FORbsZJZUWG7KcvmiNw4BA\r\n7tJ8cfnUlashhAI2iAJywx64oa+jAZKfDXoUk6OLZfv3aGFe0aslVsilQ6jT\r\nMvryntgn6+SZRpSDBFal7uFtpeloO9EG/RQ=\r\n=0A9R\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1598-28.0_1651014013879_0.780579581812308"},"_hasShrinkwrap":false},"1.0.0-canary-1650-29.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1650-29.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1650-29.0+ab66bda","@bodiless/components":"1.0.0-canary-1650-29.0+ab66bda","@bodiless/core":"1.0.0-canary-1650-29.0+ab66bda","@bodiless/fclasses":"1.0.0-canary-1650-29.0+ab66bda","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ab66bda42ad44e020daec6238ecb29a4f138845c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1650-29.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-0PKFc01MHQdxj8BJlWmSSrHABA0hZX2ECULp9zS1+RBTuGJugF6G5PAgc561pqMAH+zoPZQUpWaJfAmHM4+qxg==","shasum":"8c9b6691c382643618cb91cc116c4ebfb847a57f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1650-29.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVagMTUd5Y/LONuzhuWLoPbdhNYMcdWtgFfyEsfgaihAiAtjmWLtyXUCpOh/s/wJpOPOjlm7DM7D5H+Nhz3OIjUkA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaS+XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8wQ//UCAM/scZbfw2q2UIaChUYcCYr+itgMDEbcnkIOAhgyTwZ2Gs\r\n6gVsIc003rsNMqPwjWXwBQcvuiix09/eDruh9npuPIVEYSdfteBqcxMkgemK\r\nb4Hl7wFxTqhMZmEkdKTxI2MO6R7NGpuUg728yO5Z1BTWK8VA0gNaUtsDmq19\r\nEeg+b7MTu9Qfw6oOpn2oiHYDp54W1qKIA3ta5hivxaIBZzHWm2Icwx3FZDPQ\r\n0UNA0fmb9FKb4kpRl78yDzAhgMzFwdsvMhknpRGUmlcSGw+Mn2vzvZQ1wJsw\r\ng1A6D24zreBUy8MtuINnik292ZVh/PIdVoAVPZY/ELxBHCxmuCqoJpvoCH9f\r\njmLAStRi8RfGeMDTStaT3rZSf+EhMNFAL6sJUbvEX6d3Bu4h0a0GaG6NLAgn\r\nvX9Qr28CHS1aJEEEYttxlpaK2ThYgmkGEYiL1oTWFwvIlzfCYo9EE5nGxM5j\r\nUZF7zmH0nnt6ovw7txNB1lOPbdvFsppJryCdft9/0kMI2mbMKZYTaOT5gmlW\r\nRiHVDRYofw8L/OcaVtBZjG7yBtPu0xmdEf7pr70E8WBpFyLdnEI6fhMSBnr5\r\nxcv26d1pVzHTVW/ZI/92FgWB0IodvClIO7ZHx54Ru4cXsq7HRYr+Hslha0FC\r\nrUitrS/riPmpxZizfrRW+r2YxT9rlhfhd+I=\r\n=dlB7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1650-29.0_1651060631477_0.6958232531549915"},"_hasShrinkwrap":false},"1.0.0-canary-1635-30.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1635-30.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1635-30.0+f00f3d4","@bodiless/components":"1.0.0-canary-1635-30.0+f00f3d4","@bodiless/core":"1.0.0-canary-1635-30.0+f00f3d4","@bodiless/fclasses":"1.0.0-canary-1635-30.0+f00f3d4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f00f3d45771c24be357b6dc9faef863db359e6cc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1635-30.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Qrf5rQl2DrnmDgVYTAoP6Ft6b/Y1LxZNZS+rQronVkDk6byqvN4zcd4VRf53m5+5nXVy4ehvBcDFKFq2e6qO3Q==","shasum":"b90961b28bf9b673ac805a0b2ff532a00af2ffe6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1635-30.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICAraIkywV09OvFfz+UxLN+SI2z/b4wr9Kz3ivYjwiroAiAbJ5v1efwxxEpRBIFwrkYsE/ZFYL+p3TtMn5LobP0AgQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaUjSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoofxAAluySJyxcXngzu30ady62lzlvYmKjn8fGDWrpB4W/F2r5Awdj\r\ngzTFea1/vBkXkWlJyHW/YnavuaBSEzDiXyfAcJiuGETi3iIuyOWdJUMrfz9J\r\nQpLbrvl8hRKP75633bBFHG1wXpKfjBfvUoBZm+m8nOtC9ResBE9L5HdZLi/A\r\ne7q0gBcMNxw6Q0qEwVpkzoH41FHxizw833VdYnCgkXrrXvHuDeoTM1B0HVJd\r\nlTlvCqgIK+phPIZIJU6HDc9hP+1W6U23dLCQwPnHgHF6gshTUVU6zYR1hnIf\r\nIOLR7EHEIjmTa0DgLY7bbLlA7/RyJA/c/1lreWDU/IgW6VMwKv4gqp7oNejk\r\nA1InFNg4M/AytssW2hZWP5sXQzpDxulf7Ufwpm+kl1WETatoa5RPhmYi9aUA\r\nj4UwhccX8eCwyK+nwKDO5aLOi9AL4bMWIKR90M0mkMJLxBWr10jYu1bHN/4n\r\nlnLZ+pkCTtGetRuYFoSTMKkB0kwW4YxbFL1MbJLBbpku0681Bwp8I45o2pzT\r\nkAat40dumBlKmZyTiA3IY02GSFh/55AX5s3UCvceaa3BWL4XX0BD+G3ZA+Yp\r\nE9MP5gRxlzKKeET0Oi+NBP4yB+FWRT+TgjEGQ84i6qE8PNxyxGT8fcf1tIfL\r\nV/3jIHNCTUJMkpCyv61AqkJ7MCG5Dw3rF/k=\r\n=O53S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1635-30.0_1651067090413_0.8086476707773966"},"_hasShrinkwrap":false},"1.0.0-canary-1652-31.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1652-31.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1652-31.0+f00f3d4","@bodiless/components":"1.0.0-canary-1652-31.0+f00f3d4","@bodiless/core":"1.0.0-canary-1652-31.0+f00f3d4","@bodiless/fclasses":"1.0.0-canary-1652-31.0+f00f3d4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f00f3d45771c24be357b6dc9faef863db359e6cc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1652-31.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-1qwxZSuxmsSQAQKLugWzUgIrl0uEWAyheUJt7tEweYhy+W3N2acelm2y8NeIis1467Qey46W19klUQqoDz8fZA==","shasum":"149f0a2d1129e75e769ceb8e43b867eedb3e32bd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1652-31.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNGoNpgKloOJVpNZqzZ7n6rr78saVp27HF/ewuaFX+/QIgCeu89Z7Ax97LvCT8Qt6QxaolVyJVbJYzp/Q41sxmxV0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaU1lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoHA//U+YAO7tb+z3U2stDJOeyBnwxflpndromUDXtCl/bKyowDrbS\r\nUxZe/AZC+alA0a3AyepU9vfogZ0v9IzdOXABtYFpX4V6j8DzUoRvTsfY0wvP\r\n4oKtYDgVEim09I/ocrQz+27qEsgixnlcwwc5hYHVLPHCyd5RQHA4amuv99ZH\r\n5c0jEIXAhsytTXb4RGwJHTaR8gruYeokVAuQo91xH7ztPdRKEkgn6s8CFMve\r\nK1Eg5LrXLwinuOuGy90H+y/ky8p5USFRtU7jpXkTRRHXH5+Kwr8A5GUm6sBP\r\nMyZdEkRaGSiXVc/Rg9/CxMQkkxS95iRnnSK6P5s+QTMn4v0miuiDECPo39ms\r\nsQqVHvTMb+WodF8Fpi52E/T/QHP3JEdnysLSNmg5g4NA0FG/9dc8BMO8O3E4\r\nS0wKsY01ty8UTShpKaHVEZnjPGVvapg+s/iOFknlrorJJ5zGqBXNu0m8YdoM\r\nQH+Ejzn4v//VTtS8pfg58fPFgztGPnPheRTg18dqt9ph0oRpj9AaszdpxUuX\r\nFPBCorwhA+m8Jfud1iK0IKfRt/YulvVHTa/4qDFbqEoIh4K7mFgbFgjkyYzf\r\ndjBUCoONFlO5gIHYgB9Cf53+eWvOvy9tSatkHRPZn4irV9IA8+aiY1qMa0S4\r\nnzovBaKKgOk7sjtvMSJJzi1fYT+RtZoMe0s=\r\n=eeFO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1652-31.0_1651068261238_0.13359610924383047"},"_hasShrinkwrap":false},"1.0.0-canary-1553-33.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-33.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-33.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-33.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-33.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-33.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-33.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Pj52Oe+ZhzD4oCp40TpvSLr3WLKpV6BpBwjdmRlmPaafWQnyGJ14bqwpVKU6hktnYT+/LsyzoXf8ZJTHp01t8g==","shasum":"9e79b795b23a36700db34a3f547f418bfce32d9b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-33.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEsuFmd94PEV9NA7MIWzxs9Px4nlHNJ2Ax6VvWKvaK5yAiBi+1UAm7dh3dme8+46zQDqxFoZMapEvsYMfLPEKn7m2A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaVVGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr78BAAhKa3mK2UoZLDamQ7gGgD7fbfEPxA64jD0Egq/Pd5psPsLQL4\r\nzcuI6DLXC+T3KvIDfFzPhdMrGDadD+yKWr5wYnemox9cPc7ho9u9VpwIIZz/\r\n7Duw+tPa2ZODikC7X9mW+WDqHir/dI/rqD80ueXNat9KXdxhc3/cUGIWzioK\r\n5OK+qXg4DHtVPbSTnNuSr/Ns4OxvJvlWx4odijAUiiYQtM+V3oP1KCt5x7Hx\r\n2OGQBVqGJa+s8gZc5qW6IQg+vh1T5BAqWp//lQRfxH+yMRxdUtVvg6BePd5t\r\nWzavKgWW+WfttTvFGK63nrYJsMvALQmqeuaEPyMfNgykS0UsISER7cHe9adD\r\nGu5eGp0+0syHNeaea8tQexlriWAOoIeoTwRqtyjqzQTBrN+WVjY7tiGLf6tH\r\nir2OLcvYukM7ltzLLwxm8dcMykKajFTAkCJ9HkyCpbN6Tekfb2xdDaZEkVzS\r\no2hz7ozEqTtiTmrtf07tUPSHYRSwtDjSchQ+3YB0tel/ey2tKDopqulXsCXF\r\nUdiqXV+XpNNKJIWWBZpPflcGFMwroUl69rDH9wRa8q4lwrJ7vhb7eUASxOZY\r\nZ1z/hCMexrKBcvXW6Q6+1EK/Bgf9AbqnfkU12Uvhc85xsM8eKJErMvoOnHSp\r\nnikf89JrzSjD0wWB+FnE7xZzglpkbi0nQUQ=\r\n=KoM0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-33.0_1651070278213_0.49040894061736395"},"_hasShrinkwrap":false},"1.0.0-canary-1553-34.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-34.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-34.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-34.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-34.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-34.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-34.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-OyyyFokGKBmdFJqsmZ2xJIEycKEtUpXmggLM0RIhSDeTUBYttnUQhd5Um5Mv88MR6yH8Js3jph79XaCAX/SSng==","shasum":"6589cfe624480dcab51ad6e683ae2d13fabb5767","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-34.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBOnrr8K7FX0zemin3uWGh2vzliktHjPhZptDSJxzoFgAiA0asLOg+z2sc9rzxuB2MQcet6WSN+NAoiO7ywjm9XFRw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiamDJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdow/5AIPaqMyQmLAbwuw1j16JgijNgpjswZnj6JD1cq/vBsB3h0Ps\r\nlOTMkTt8r3ytIHEnMhTPd0QOQ2ogWLmugnSPgsKOafF90J6uIFWHABXYN1/O\r\n3w+fYl9tAjT1Ncz9IbXWPiP7JTDoH7D70tJgMvls1mkssjXcnKcrt/W2dVPM\r\nR0x3TfYKiOFK9TrwdN9TmH/OfconqMjHe/EZjHzrudhhUMii0dcFt8ZNGw87\r\n2qTtuoaV4qApZaaUTAyz/5t47HgZS9yM611j7f7a/Sp7OSDqKxjgk+G2QiCd\r\nBahcXJaCEhmJccp2x2lb7i3pZmyi/VmDxRy8c5AMIDNSbCDU0Tm18gntyzG8\r\nOauIM9rk/m5gi7HpAbHTqbhdNi69hO/GY1OUMD2SRvQ4wv9skQXXaiNtqsWL\r\nq9UB3/sK6dNXKev/Hesj/jDDXAbiQJnec/JfHeaBgZ3qdrDhhChd7Mcwspq6\r\nqYJVCUlKJX07AablOReGC4Ml1cBHOWCBECsn2ECWYM45j/JLmw1lo3gGtWVJ\r\nOjuMbENmwYSOOg0Y9o72fLv0p1R3cqzaVHOfmg5VjTNul5pJVlITbxY7ffL/\r\nPKHyNO1brQIp7Vz7kE0sP4xP8nUvmts3I62GaBA5IdbMvjXvYD3mD6WZHQzU\r\nnClEWwP2wBt+iY+Jfo2mrMZRo3e2w8khJ08=\r\n=XJqS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-34.0_1651138761590_0.7999662022285581"},"_hasShrinkwrap":false},"1.0.0-canary-1553-35.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-35.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-35.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-35.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-35.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-35.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-35.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-CrZbo8GjG3H1P6vA/vA2B9j5WZE/y2i/EtzIWvHUggK+IglV8jcOqs44sPuQEy5m3Ye+x0vcsC+AnnhKa8Xx9A==","shasum":"163373c1c8db5b18eaf5c4a6ac8cb69d26669656","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-35.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG19GIeUZxaAEwFkARqgF0BxAbVxbldCaTJ+yZ/moG8JAiEA05JY+U+B39JFc+A9tuyDeJkeCNGVrVsrfGs7G5OiJAw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJian7PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXVg//eAI03U16ne1nlb0lQXIIV3Vdic/FBoQmQPCTwojAsbZlF/5M\r\n51O2vCaH6HR5wafMFIWHb7t8PSIdX3ybhTGcpU5h8sFLghtOAgEbqihLwDoN\r\nwT1oPPNKL7qHFlMKlBDyoI1KuO2IH+4BsgoJbAbHS/aOlbors4l+3gVaClsQ\r\nm0h80px3NWoLAaZ/w2DCPOJYv79x9eE72KjoE+Jz24IW1lgbosteI0mWJANL\r\nxnHH/nm0UGe6lazkY5tFsXio4smbxxSQTi5IPYpwaJvRnfCjXylZXBRId3EV\r\nmYiHDRDAXpWvS2g8h2U5sQZcD8u2jeFlrCeYOndziDK9gZRl7QDAYXu8Ipiw\r\nFkwZ48tCfai7WtcCIs/zsGdhRzDRnHsy+eVOv5/JG3cKwuCi5L5Ff66KlC1x\r\nmIAZfvcmVVlmM/AKCVKMy/eUpnDmL951JnW51j/Sb6O/msQ/28fN8paaKLf9\r\nMY0mljoQbHQ/JETPd47+GroOGIH1pGTApjeepCe395ZbbhF5obHIWSCV+SF4\r\nGeQDjiLiy/RUMzlqvOw8o1KJx2gzMH4t3af77kLrHmW7eV6g6OK6mftclZyQ\r\nEFHtDHPH729+I2JwDIXQO8v3GvXRHUB8ge4R3ADhAqyrfvKPowmq9rRoldKX\r\nbf1iyDoXFo55Vi4w17Wx7V3Tz+9G3jQa3ck=\r\n=6gNy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-35.0_1651146447408_0.18812884055379353"},"_hasShrinkwrap":false},"1.0.0-canary-1661-36.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1661-36.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1661-36.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1661-36.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1661-36.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1661-36.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1661-36.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-QUBF1sTqVr0EOMIO8WIpC8xN2lV5UQBeqfL4MaT6WwJ++PDCQGJ56KuiGB+21vDRHfbTRmo1LPq7anFYEoKAZw==","shasum":"03601bbffbfaa95002d8346d11a41380d72f0ed6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1661-36.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3LQlGkdj/wdX/fNt5rjeBjTpv2Sjxzln/7cUUojPZtAIgDHXb33WoIbNvoZVbZ4CffxfzyXMzDGEqF+blv0wZWFo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiap/PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokRg//d9U0OabhiKNH5GOuPGo02FYTuQM3xcmfGegiAPg8hAeRjy+A\r\nhOcMz/6aCF3GXDcCTcBtAHQewqPzCMQR83vVKah/gLE1zl4cO7Nh8kLk1FU/\r\nvY3oeCkIsCSR6fPXTJI4i9n8/j46ryt09ExJNuFIWcDLXVE3FpKik6rKpLLw\r\n5py86guDUJV6SOi5Ba6R2POleYKcXHhKSfwsLgMPxT8GBAkn9ttTdbpr206s\r\nrSBRvgPOZXdSIABA6KuF8qZc1AFRcRZpZKA0YbEmqZO3cI0Ezgpc5xWPiyVT\r\ngT6zjSrWSji3HQTcyDArYSyfpFbK0hD5WzmDJLk8WAydvq64XaiXLriPvxaA\r\nzdfI5eXBO6Dt01/iRnbN+66bgyaVWPWhdaOudC4FmHNPN5u3SU4vbUQTKc9F\r\n1S6/fX+w8MWAq9s/HW0vzOLND9GikCjIn9ylcbii+kO0ySHbJsolop9RHs0a\r\nhzkXe7uqUZGykV+oSZZG8vpoPndxiEdfpj332Vwlsa92rrlZ8AuUqfC1RcKm\r\nu0IcnU/XHd4FlGE9gw400QNenGZkUXxyMneNDH716VWYyblmkMG10zfiHL+4\r\nGlCcGMQx3mf4B7wz5NPq9OBiUDZzwMnudNgAV2Q3cgIRir5nWhZGf3RNcYWS\r\nwjjQt4o25YLNDrXhwfvVipCjAcMiJK2VFRQ=\r\n=4UkS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1661-36.0_1651154895607_0.10931467783934878"},"_hasShrinkwrap":false},"1.0.0-canary-1553-37.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-37.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-37.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-37.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-37.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-37.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-37.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-8diIW6O+y1TCvt5O4LYQ1v0dZ+AqkRE2k54qIWwqndQ14vb7WTqQ7e11v89Y0wO2O7UEZNYtH06UQbqWxGd8+g==","shasum":"709bb4e7254bbf59ea6bef6455db7e2e7a141993","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-37.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC9KS9Zn0/6udnkK3dS/ZPIMKaUOdrmgJUamMc57Y85jAiBRzz9KorC7d7Fkzkli67MhRjJPm1lKtDoXsvm6y6HwfQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaqB1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdWw/+LodrYoEaRBzELRXLgdNUZGi4CObr+5cpLr/fgamFLM4Rqeo+\r\nsGv5mlTR0M3f8zRAPaxX9u4qaPQxDpgOMkHU2oz3PDpZ6IPQHuhfo/3/El39\r\n/ZMmH27JvJnQmMsQuri6d8uiDvxxXgby6wZ6w2WpKoF7RKNgSknp0I6vOKaI\r\nIB7qpofr+knYDHD/zFGuyhdqL7/EQeldFhsRdR/M+HgL4nVwxwydR5m3pLqk\r\nbD+unViDXdIv14Hpf4AMNg3oKP8GVYZbq7PqYIt0y6gLu0yfEqLsEEBqPZ6h\r\nvCsYLuKxEHmRrvR+8gRzJ+u1sgg8YwtigjNje1x4RZmGEWHiNq2HdQaKqobf\r\nD3/Fc9Lv+Ff+2NCzujWaGdVGJh0hqVGKftPeHZJ+QvlDRye/00cWjUuvOEVN\r\nC95U63I6V5gCEVD4yuHB3TSK0OdArhoIi8xDZrsPHc4Fs0OjwbQXTlhTGej1\r\nEb49NquIcXzTGxvZ4IafWr9pSF1w3839OFOtk4UhOsOyeYjZRo/le22Jwwzj\r\nbouvwUTSuLQkcMRgUdsKC8etJI269fsWZiFy6uUmfHJEwACbgCtvR3BfAVNG\r\nx3iwIQfzxFA8W3sO4B5G29r+8/H0T1LkZisCssL2xFUwbx1tggTqbtQfJ2Wq\r\n8vBysTVNGS5f47141El8pnY0NSC4xDXXCSg=\r\n=FEqL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-37.0_1651155061609_0.9536028153415408"},"_hasShrinkwrap":false},"1.0.0-canary-1553-39.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-39.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-39.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-39.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-39.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-39.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-39.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-MdB8y9H7Ha/hh14KY604IgbPbcBpsCHeTRJjRsqTDk6emlSkMpQMf7ZxVReVv9jJ+Vc3V+RcM9bgb17fYA0WvQ==","shasum":"dc26acaeac870f90e83ec8d5c870ca1b7c7624d5","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-39.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYWThMmO/xiC9ZBW/swy4Yba3LnxV7rDD6QMeB3RrRwAiEA5xhpm3mPNdWtA2sRJ2NPRFb4ThEGN0zvHHPbpNuY0Rk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiarlKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPRg//VMbyDuzihB7181CyVss/mP7hvJ12IdhlpwJyyi1rRfA6tkfb\r\nRF9xxjGRivhSdKh3BD3G3ToiK6q9SOe5k3gpaote6G7KKgmE1IgrqEM6cXQ3\r\nIzPNLq1vH1u4oBepovLgOfd7nwoiFrDZuoPme8MpDBYuoNchMvrWyM89lUFD\r\ni7EinCdSO7Rbs2ixqI1yxdLc75ONM956INhua+Zd4uScl/gnxSOtE+Zeyq4+\r\nJDZbWmvBKx8ORl0aAW7tECEilLwqz6TYYukCBZa1rTdHU++wmnEECI2lPZGd\r\nCw1bvgdukHMxKC/A//gwXT9zEzHpa8zpE2g3VoX+Rphp8aBJyMtUdZDDeL8m\r\neXKlOeIY5g2t3k9eweONnhqA2YorTS3gfAqW5L8rKFZ287WAj2e7SJy3sQu6\r\nbpk+dYppJrdMOrcIVl7wT3kUKIYma+4vkk9E6VAJ91+AFMxZ8Nu1tipGxU8P\r\nPCOlHyT/0htu3XZMVUgSB8gPmDsQtd5N+lsZm+wOVQbPmJBvsOkXAm8kepW8\r\nj9OTsOe2qEiU4u2zTeTGokPk5tjuWYE3SFEPG7YbgRfp45TLQDNr5ZgvyNzE\r\narx4zOFLn7ax4PkmoLLkoGSLZ91hFJWvTT4LGtienVlpiJymRAS/Tjxai2XX\r\nb4JE0E+HJOU6z+sDKC0f0QBC+1cwTnGPhRw=\r\n=xVzz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-39.0_1651161418010_0.9758971750988146"},"_hasShrinkwrap":false},"1.0.0-canary-1553-38.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-38.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-38.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-38.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-38.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-38.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-38.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-PV2sqHiJNttPVVO3bF2W+8SO/msSZRo4vPKwPwUBcKeo9peuCgrOUPHj02lUUWddSouzPULhSb+XDu200sRszw==","shasum":"9976f4ce22c47f8ed2927f0f996b7f96af857baa","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-38.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDoxcUO/uRD7x4QUFioXsga+7QekhC/q1DEmOEbeWBQAiEAur8fvq/nAajf6+S4Z8WNSUpqBXT1rSw4jqPuvR/mWGQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiarlSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhTw/6AvLb23DcMPDDYqJhLpQtgm4aZAotwkd/Otf8wq0HgbkDEC4w\r\nrX39iek7Il3mDe+6wB/9IO937YHJ8+hiX/QHx9HwmjAyWBuqm20RfcKRJuzS\r\nuM2P9gy51ValAG5LEMBRJImUjX5Uwq50QF1IUM4ImNfzvIZUgPtqkwnqhc5i\r\nk8bP4PT24F7TK/yR4Zj6outno8/05eoVe+fDPPWhyO/vI+uhpDHnC7y9HVYd\r\nUCIZoPIXz29bRZSlTSQgr4SApO8S+ClOkliHajgWD/9LGS1H5m6vXsZPYAKG\r\nIKg90fh1fwdYMymUIK+DpCecAje5OcLGl+JFH2cVbLem59dpyaiRtTRQ/Zlm\r\ncwDaRFmOf1cF8eW0y7SHAr5gxAimdGABisRp9e8/Oz4kzQawUbkLWL4gbpUw\r\n1hWPJfOLXKNbzVO0LrAaDBD38dLBJSyqImjySdUurYeeli/Uh8OoirBIAKvQ\r\nbLRwrGjyZOx7lWxOMjAvJVY7SnoqAtdeHmITZ7atqxWAXCule2k8bofR9CNd\r\nLvn+h0FT+GboEH7gL8mceYMrB0JP4oNOXvmySDFkRbX05K+UcCbSQoqT32J7\r\nIWnzY92qRajG5dOhrAebh1abNaENt6YteqGNswGMyqRAN8b9tFZ5kLl+plJP\r\n3AIptv8zKYyawqjPm6QcILBMbbiUy65xVL0=\r\n=mK+i\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-38.0_1651161426658_0.047747689685772254"},"_hasShrinkwrap":false},"1.0.0-canary-1553-40.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-40.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-40.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-40.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-40.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-40.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-40.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-jYh0GARj3/W5uX0Sfel6xlGfvZ5cxQJLiTmimqu/VnZfiThjk4AmLIdR0XVhPFs/WAwRHsu7kF8E3943LwQE/g==","shasum":"d8901c712fb19ee874ed8b23a3bd478f9219cd04","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-40.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1JPnOw3ENkBgPOL6/TVrIT0qnhC13PWsoz0joW9fl1wIhALUQzVlYwZefIQvxfBbSgAqr1ajDvBQABuXwUMwSqFJV"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiauBbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrYxAAlUZHHDhRbUx2nDGShks3hGZipTBEvL8Vmg64xlpMK5qUSx6b\r\n8x2rD03tI/vY29i8AKd+riV7sReKDEtirKFK1p1uDGGy52layPlZzLaOGYhY\r\nUiOFvDSd+KHGOexeM3dObAHVs6gPzUhhlQC2NaHxl3eLsaIulb8av/xBbaaH\r\n+FvgRSPsE9EPcMXSEoGOkprIqrWgBA6UQNQKtj26eQoPTHm0infLsMvIUWJx\r\nnnKzKWsdlfkWIqgnYOQA5WfeowIx78NNtNeg7HBpTvv67+Qa2FNBxGSv3RbL\r\nH2/Otiji81S0Idce5qcIwEmYaQTlTNqifG2FN99KC9rvhhF2lPgAEUILiCdw\r\nnoRnNSQVhhpKSS2kFb8QDBsjM2uy03htNwWvGxmnWkOrnpb+tMCfCaHNovkW\r\n3w4UAFhL8TMZ4yar9vYXviTy4KiJiJwMWR0HrEsal+oX4pvMs99HW6EaHeYx\r\nGc6YP6M5BTYFK0zenFbNBMUCRFdkgs51MVUz0IFGlgIriufHprP5v40O0asQ\r\njDrMSRNLPlAgd7OrjPZGZJF3bxbt9nvc+mxoLStDZ/5G2vly/G2i/Y9PKYcF\r\nyR1PK4GH0zccf8QVhNPjOjAh73H0Hz3elq/pBuD9nG91R3ZTUmwg64+JbF2g\r\nKAG3ofvUFgsDcgzXv8GIpth4fsyvfpSmlII=\r\n=tc5Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-40.0_1651171419359_0.4817619514771634"},"_hasShrinkwrap":false},"1.0.0-canary-1667-42.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1667-42.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1667-42.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1667-42.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1667-42.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1667-42.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1667-42.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-W2pVWmfh7AAiMgnROe3DoTwGKC6WiNZt3nL5OCFbK3Sex7Ndxui8cWSbHZVFPKFn2LFsBpds7AIKOX7eLGKmOw==","shasum":"dad4d3cdbe54cb23de0711933b132e8404c42d86","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1667-42.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJK9NUI6GV0onE+gHB1qJmH0EO6yKbo0OMQOuOrVSh9QIgX1YwluiK8H/Jzi+qqs2yYQ7jDHpItFmQxhRQAYERpkQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiavBHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7Zg/8CqpNAGjpROzl3rFFcc9QsNDqsnBYGz4P/xERFNPjOBx1yhR6\r\nK1q7icUsGZzmi+dSV/HUgXk7FYQxGlaxNV4hpqwsrTk1iud7Dpuq/Rve7FrN\r\n4lWQaOSj5iMqEtovnU9MkxWWrCdlUj7yYL4ujzoLncuJlXQ5XhEezCc5C64s\r\n/mFKPVRM1R3qOdTO7VeXeWolR5zlMXk6ledtmrmA5Nw/uiYjJiTw4BUUlvKN\r\nkgbcwTozGsc5+t4mRyW46Ldfjeu8rZ6TIYSyhmAKSGbkaLEdeONIRqkKIt1g\r\nZJ0LF4y5SUSN4BraBdgezuWN3TlW4GyHqL182e5CmNF+3t/Px071kzJtA21k\r\n7H/hUirgYLVLOjQPQ5qmes/kxOTCZ2dR5khb6Q2N0wgEPo3l07LQVKc40f6S\r\noGbQU2TDHimfRA+hwShjHreVGbtA9sd7mwmks1yJO1afhLc0dbdsowTJJlZw\r\nwX9OgTAzVwbzm4Py7zw3duvbR1nyJJgfJZcO3wQMa8ar4tqsV0qT3bLt7mMp\r\nQI66A+C6rT8Zwt6B6jbPXVNQvfuE095Q0cDRyH0C6CyWc59K21V7iCwHOuRK\r\nf+sxyqKWADbr1ITrDIDSitOpsuPHqtOr/ZH8ZSLhe6Xvy1n82uPjSdPN/hke\r\nqNPe90U35E6YCI/5lpUaQ05QRsw2jzKqeGE=\r\n=GTOw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1667-42.0_1651175495717_0.15901263672996446"},"_hasShrinkwrap":false},"1.0.0-canary-1667-41.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1667-41.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1667-41.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1667-41.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1667-41.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1667-41.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1667-41.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-AjQRLGkhmG80AHxqoZJIDnOtH2d9TW44bTL/Y6UoJAYIkezSCoDVQDbYhThn041Cji+qpG2vMM/lsGRpt4SbGQ==","shasum":"ade816f39173e38fceaad966b4a2a473ffc1687d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1667-41.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFabrNDrDqBmnRdG6b9pNVQxMnvybnDXl68brMtS1RMxAiEA+ZL5tuSIo5CIji2A/jbWYIFOQjE6cpijHfJJqfi8GLY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiavCbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9Qg/9GRVt3Bz6tWZ/s2NOHmVgbenGQlydSxynHULJ08tifI2KMWUQ\r\nt8V5tZZgBh3LpfC+itMJaNzCUUzR36m0q72GeCcql3c9V4k+HEuPiPZfbLJa\r\nBNQxD5TQCF2nB+JlOzlqYX6ANbatd/Wm6MbodPbQMAP01dJboQPWPU9O4WHS\r\nx5x7VpIfjSGwmzwxllxWp5tjECheMGDxDdnkWHYe7iQeyvms+lQBhk6Zs2cZ\r\nPUzajW2zXFrrmM9iszoBM9WuIPmUZUWZKmm4aIQ1YtIkGegjN5kgRvpr6Nov\r\nJMjp/s4u1yUJSDk9A0oRtNc89DgEaTr46iloJzVFTQSExkXEsIKLnwsCiv11\r\ns+I4tAwwdxtZX9PEUTVCGaa6MDXdiEZlUxp8lMw64u4GjHVB9sdYr7yjMxRP\r\nKgmQt2rkCd0X/GPn4g9N8X5qhaPaXsjLyqBTghthDat2YjBXu5DdzuzwNY+C\r\nuPS9d5q7phwQQY7YWOLMaBDUKTzoFwqmwKehHlcrKtoGR0hSrD6IFNhkfNAN\r\nIECrEY3XP6qmCpPurXLAaEpRMTNfFFBgP/pVljtbr2vVDbiwYN3OdjgVPwaR\r\nEyMu25P4KtvoXmygviUY8ccnUZEhOqqnSo01Z2V7ngtV6/6KiNVPgeaJOaTH\r\npyepydFsvjTbmpW1O9ciKwH2bKLqU5rZE34=\r\n=hkZn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1667-41.0_1651175579179_0.4017903220035435"},"_hasShrinkwrap":false},"1.0.0-beta.11":{"name":"@bodiless/youtube","version":"1.0.0-beta.11","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.11","@bodiless/components":"^1.0.0-beta.11","@bodiless/core":"^1.0.0-beta.11","@bodiless/fclasses":"^1.0.0-beta.11","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c8fa73dc1f79b2b40e6b59cfc77c0bed2231cee2","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.11","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-yHX86jCtkJt7Ab09V+L3yNWmihZdcHxpTjZYJWem6erXxYpv+uxF8mntaqHrCzC5IurPTuNXxw/KeSJQsje54g==","shasum":"60a49e8d3767fd2882bcd6f030c5ad391bade5b6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.11.tgz","fileCount":22,"unpackedSize":229665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTNT7G+epoF9t231v1Qf0Z9XE//ckLehBb0MTt97QuUQIhALTDUVz8XJs1z4HwGyo95e6rLapAFuqyMe5SjYVRYa1g"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiavpyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpuig/+InafhFzF1rLxmBA6ha0BLV3q5QP3Xmd34GFTnQomilUIoUe9\r\nTvZdFpcQaw5mEuQx4fJlJLXEhqkgTmHZOIDH8lobtWJgSL+6SibFWU/ReYZx\r\nrVEKyu0B2yyrUTkJtUUXFusYHYmGURAclxQJW0f+zoLpXIylfl43rfS+tYLA\r\nCxP8xT8Mb+4d29OliB2S8vZ1v30DyjC+hPwra+pxmRnNEbAhcQTuw60nwB6f\r\nD4mqUAXf32BTUjL3+aG6ZEf2xr9mFQusB+Vczu/9gm2hdsJKadIHvnIY+i+8\r\nlpR5P9cbgUBS+ELUMOrC/zfpzW7tKLCPseLRvL30nk04NFKzBloEZU6A+AuQ\r\nmUSjLe8tynBIiaAgRPZ9l+eGymSL8iHu8LMFVvjyxE3HKuL7hkOZrsGJXMdw\r\nhRq4tGyCuvIB2XaMLvh0NWuAAXYIbRUXsaKMhlrcCDazEj5DYVhWFNa3T8i8\r\n6JNH7Nu2JcKLro8W2PZi57us00Wtpfr7CtE0P5R8WVU+V+C8V2KPlIW36zQN\r\n893FFYkMgq5tipUwx7BABJtXKMV1pNXu8+sOXKU+GRcLgIfE7yguVjg4cWAC\r\n8iHWm8Ih9xuKIfZdJm34WoXKnjkD6dqNC8xGjG2wLqEgdHiPzemuHZJywEHE\r\nGQWt2uExtHCaB6C4kQ1vDS51/dWmwWblmRY=\r\n=K2wW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.11_1651178098389_0.021974889828226152"},"_hasShrinkwrap":false},"1.0.0-canary-1553-43.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-43.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-43.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-43.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-43.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-43.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-43.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-/1GZs3sWCn1NGeCFTHgtvdV+PrUt7jmKh21IaXgczsbtZA8reImrjrmXzBfJ+TUvRgJI/yjkXnVLYe60qUdp+g==","shasum":"c6c6237307707af8ec346ea215ce4a23be682480","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-43.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFyILiEyhQMXBKFtFmY5DzzlEwctU+um9GbeDPT/olcZAiEAzVln/3IICHnhgVyisMQFjJrYWtXKib6A+WnwN/Euthk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaxUKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIIA//a/lpUAqy0yQJpDhTQp7e3a8U9p44D9DspED6QexBbFb+El5I\r\n4xBQI5+J1VgU8p8JDItbOVZOl3L5D0u3KXrlzDJgt9FDsdT6M+FP4MKHLrk+\r\n4RMSmDs67Hao/E/wn/pyQasu7Ib7QpHhgAX0e+9I+1Fmq3oRihTlV3tWjMwC\r\nHy/0IpqtpOSdRZSZGEzaiWdi2JCZzbEs0aH8RTzqFL9t33Oklw1gdugFHeJ0\r\ni8TCTgM8aanqKyQT+fTkRj/aehFcFtv1dRoKPQhJ60F18bdsPIN9V7S1DOvl\r\nm2LjfnBnYxerBaNJaO08K1dBOiFV+BZrs+QtjIo273FnmFsttUOulR6GRB4u\r\nwGQW7QE1vPa+NltPF2Wc2RKh8h5ORUwQB+ReSrPOJ6yAdK1r9QyYttcKhQWn\r\nWcwN1nYKE9O7ZZnzFVputjbIzHJbBEv/KaoJX5zT/3I3c0IKiM5WaG+Sd91A\r\npMn5zc/hqK3xH2Yiq15KJG4kZumRfDCOZMhlbEOfPV7isfgd5mOV5qnRMuNc\r\noODGXAb6a7ffkUJz1+pwEEBOBZ+2qYxMZYjke9L4ALgmAxsrIlAtN3xibhha\r\nGvG2hSzTeiih66Rnj4baSrlfsXtzOWSS6z/GEf7Qo0TxZMKLEFGpGeiaz1pg\r\npykl3mxEDlXOlgGqeE5GU8ot3z4XaKrfj0k=\r\n=v8TX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-43.0_1651184906101_0.07283853455172062"},"_hasShrinkwrap":false},"1.0.0-canary-1553-44.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-44.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-44.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-44.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-44.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-44.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-44.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-NFaG3PGxXt8IiDmuXN5r/8NSzX+zhCUYhqborKDjqqprkSN7Lx2Bo8s/jwd9ryRzfdP7J5WXlS8aU+t/GnKzWQ==","shasum":"bf46490222dd7b6a0993f0bca2b8418cde778383","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-44.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCI50kP3KD0YAC3Wi/Rmcuq3G73Io8d0rvupgvB1nfR4AIgLsMEXaWSZPDBVzrkJfjgq7CuraLg6Z1qvTcuZFXUkPM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia/IQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBCg/+L3vTTt7qEziJwHfMXqHa2ku0zgf5ZzhKCwMTFYdQIvtcGdCS\r\n1IbjIMp1EE3XTyArSVekQ6aMK/SJLND8O8Tk0sxk9pW/N0icgs5xedIFDrEC\r\ncmxxovm1BVV1Y8UcxtvftDVG2FjAP0eD74RNMewYwdC6+ysraOZy402+QpVV\r\nohwPY/TN/C7aSSwul0/fpjH6aojSYAzbkmfw+NtHKA0BN3DQC4ZiDzI64djr\r\nVF0Ad5rKwl29GbeK0MBgYFLv6irlSCw9fMputsaZiCYhTy99sO6eM0+Q3cAz\r\nSUkQJMk4veghSoOl96pgD1ONVfSSx921QdkLOwFtSFIiqX7LtkwG2GoPn7wV\r\nCho6A+SpcJQYYTGTT84kwyD9CAm3o4YSW5CttVsoo5+HpfkyBgp/Xy08NE4t\r\nxcVzXg9XYDSi+eHWfc/4Ur30ZFqoyczs/RzVdtF4nqFWFUyl+9XDJwuiohME\r\nmMudoT7bVsaOcE6XO++AHlAlSrJ4IN3INYwe3cQyRqnAb5P605FrWoNlJyWx\r\n8lQybbZlyA3HE/SYQfyUqnwiYtJZa8qNhy3iPt+F/7oIqgyT6hX1i0KQo2RC\r\nqfUfv/4xSTvPQ5fW0o8fwr4DsjbweiSu252R3EjZ2L+wqpXfYun7+AjAo5z4\r\nqgb2moVCplqmTsr7HLDhJ/RZPVbHi3q5zr4=\r\n=fre7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-44.0_1651241488084_0.5065741507640418"},"_hasShrinkwrap":false},"1.0.0-canary-1497-45.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1497-45.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1497-45.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1497-45.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1497-45.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1497-45.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1497-45.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-JqN79Od0dUvFMR1jlFOgbXJ+m2izBqtFTQuMPFq8q/kauZnrvdrIe2TIa5NMzCmI1bpZUUfgaToJjH5onWA5ww==","shasum":"8bcf0795355e84a1f5ef31098c22bcbece670997","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1497-45.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBj9rWal+kJrwCKJalTtBRow6eMMFLvKbkkP3vIvsYQSAiEAyYi9xNV1bJOB6jX8E8mdvWVBuGC7mS8ldMN7rkRKV6E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibBAMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphLQ//e0i1OABefb6cm4KBS3QD7XknhTOw2WxzKuJskRIrNlkpcbm/\r\nASRWmNThM72OqqT6Z/p+tn30D8J94EFDOTJkoVlDgXKjmDucBoS8KI1QWOvM\r\nkLs2takUOP2hIiw5DbPtfs6wy2zEL+Se+rAd6zneD4n7xcD0sLk1OPRmoggz\r\nKN60Mu3HQthJJDC0UJM3AOlbH/3cdiyvJs/faY2K4LP4iGQi5N15ekn5nWsF\r\nseMMv5lOas+sojWVv8caSbYRq9boSN4Z3xrgQBiVZVZBpcidp3BodBLNBatS\r\nq8RRBRR1AUrvtflEy0Zb48l1ff2VzyEeigBRhqt6kqFeMHZPFtCyuqPr6fxJ\r\nBksrtVdhrNHSslg8XmdAfH1/oBh0c/LD0A2kzIdH3QgmqvWsw2nK7ttArn/A\r\n1AIT7lDiJl4MprA7dA+j/8RET91fEPyfgUVmZxf10j13ctMz9OmJE7ZxlKH4\r\nfbCAGkvMEHT647hFb9NdFJb+Cnw3JQRaHFZ1Wtm/EguU6hi0XZzhJeUVrpBA\r\nkNzSkhwhOlAJZ3OqDh5XDkj0QG+p0bOf2Igj+Go8o40RpleW2Ij8KRUocWAj\r\nNl7B+1Fx821f8j74aBalJP4bDIHWXrqDxEZ8Y3BR3hdA29XSjvB3IwUtJT/l\r\nMC7ZXnLnmG++zBCwjHJP347ofqSFB5lPd64=\r\n=DfME\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1497-45.0_1651249164003_0.954333100124771"},"_hasShrinkwrap":false},"1.0.0-canary-1553-46.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-46.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-46.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-46.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-46.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-46.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-46.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-bIfMLd+zm1w+fpw/eSWWd0nwV0FKRqQljR1M4MJcl6SowMKfiD6d5IGyC/x7QNXmgqCAhtwOQ3muVwuHOXjD9g==","shasum":"bcc1a7fd7f86ab9830801351943bc56bb010ee5b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-46.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICpcQ5DXDMhqzPcj8NEsHzKxGADagACNwJGM0uEgKguyAiEA21ANX6Fkn5KGfsjIDuFeYazhRKGdWYYhdLBkwLFJTjw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibCWyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFXw/9E/XTJ15jBCeVAaYyxy586WpyZ8oU0SwCGXBMoeaPvEE26p80\r\nKmcylTKTK3yS8OyzVBw0/VOUkCgxFR+SOjcBpKCrnt6oWMdCkazCtxnSByZK\r\n2PSyQCivZGtKloS3hGMqFn2QbzJUh0h/eRjRdmxjTEmYNn1NjSU8Cw1E6a9x\r\nHDtJqUixFiZqXN7U8gefcyXLdcmGBFkcPL/RJNz/5JNs9+MjJRljCe+SXbfG\r\n3ArhCZMFTe1xbJb37LmD95jtQckCaoLpS2t9R6dX92sJM6T4zUafjtIVAAvY\r\nymn1l7RIAUonOPdJwao2kv4J3JYK0Kc5uvzorT7SnuLbpBnLLJ7lmUPIa4W8\r\nFVspObjMstlvjTdqDFgPEejLpT5L8jIcErRzeDmFVZiStOoUPJ6Y6J6g8J1M\r\nvbNXTluEkJQNFKxksrMNW5AW3NB6ItzCmVWS4yWRdGdQVZNbiw6w7CEIJqXx\r\ndZN0BtmmntLaPPPzlmjNUgwoKUpf4LohBJj6qk77lBuGGCX89rpB/wmr25Dj\r\njOAFAqyEe6JojGr6HEj7wqyhWSAtUoNVV3y1vHVN1x4rB700buNDJMUDzH72\r\nkxkGr7dnyhiVlHJriWuk+kWwuVGb9kUvjK/9vsYxfZYVORnLIUKQPSbcE4M1\r\neQ09LYqlhNau6b3S0gLRy6S5NfLjnq4Dl1Y=\r\n=D79Q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-46.0_1651254706185_0.44278402016062435"},"_hasShrinkwrap":false},"1.0.0-canary-1553-47.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-47.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-47.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-47.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-47.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-47.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-47.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-+hsADETNdydjDOf5p+vA0u4k+wNIzmi251mhUu6LaZLJmpMYSOZQ3n509EuS0xIymhN8to9kFBfVEzGrv/lOTg==","shasum":"99f76dcfe0a48cf3d99aabd71ec198bc7d3b4370","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-47.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeDFEEWt2NdyvMKfWJc4w3oGmXEls4aaH3RUO7wCcldgIgXFFAnyAX73lKtlFna3FLto0/zniGnmBWE2Yn3MAUKe4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJib9j6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqRQ/+Pqqm42VuYqLZxGd/ek4eyFVG6+FckFDg3zUnCZQ1D3tHDLkr\r\n3OBBBU06zO1axDK7cxPg28SKwtL8BfSi+erHE9AO6/3jIMcaEU1NMqjAAniP\r\nOSVnoqVE45b0hmovOVZ+uHHLq7lWqlf6yyFqSygqqnVtCn9Ut9M575JACeKE\r\nVPP5ynsoNJT1Ak3nbjuYzCKZ3JxuHnpVhUxDj2yMvLpkqEimSMgGFoPNCjNg\r\nIrUQKV4L5AvBu8czLAEF6rHpwFyjJP6EIXNyONcgKrF5pxuMh+SBjU/mHrzB\r\nBXuBED3WitvBgxwxxCzdXwmcyOj7I8ojaJXHCoU+p8ebDMDkd0ve4f6JXrpN\r\nt8hHh7FVIsJNTtmUldJEu74T5e3vfEOJaJ3dJL7NU3KPlbUBxK0yWIDa8Q/1\r\n3621Ovvxs7tDkpm0COiugoVrlgqYnZiWyXiUotYDyocaTKWTWUCRrPz5h0rd\r\njIBhu9kK1tv/G4dOY/DZEAHVyGnd8bGgnUpb+rzlKjrQzlEav7L8CWNNqR1I\r\nf1EICsjZgIZ8t9XJky8go9nNlRHWv2BNNOLSztTDrobuWpgfggBQ/DuXdrMP\r\nBJRDjAHFav8g0TqM5Zgy5t+4w2wF328Kcvhe8zB6xmSApV6L1AP5+pYPZnNs\r\nUlP8ahQ+9VwYkG7L5NEl39MKZC66LFfYD1s=\r\n=iqzE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-47.0_1651497210586_0.7578215522439564"},"_hasShrinkwrap":false},"1.0.0-canary-1553-48.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-48.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-48.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-48.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-48.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-48.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-48.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ilBP5UA0mLtAE9NebxjdD4u+FwRhZcq0Eyt1fYpGFj2BRgLl3zOcIF9QbsqieRpyUYXU0ZiDl1FXkaQNw6CmFA==","shasum":"84dd750f1796d8540fdcb7ff3120dc3e22f060b8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-48.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQLUqUzkWPuZP5lBGKItgUOkTIQWkgCXV3q3nZ6WT/zAiEAj/482fkvC29yH3DeV3FXHOs5djXEYVLNYXxkc2cfuuI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicAl3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoktA//QLJJubYc4LWjG1nKugu2BIEjp0C62QVjn6ulhiGPdn6fI0J9\r\nO13qeGXUi5iv7y3C6d7EZZaNRLLhXYTqUonfgTEcZoKfl3UetfC9sJcCz/D6\r\njzxlEezbFvnSD3N2pzUbTOv+sqiZaI/9waK4RG4LfxjtlsNVcQonlK/NyhqT\r\nkNh1jBZnL1cMliqVleQWAPWT+8yMTuWFseCyb3dKGhhAEbNQbXYvHdHtJjTl\r\nhCUoXPfEwuYXChcb+5h8IXsrxRJZkDaZb1khXsuNaQrjeEE0Al28KHT3RPGX\r\n9lbC+LEOBTmegQVlNMYgybWVl8QTLBR7Gkte8XDVUpKbA/92fN2XLL8kR9Pg\r\nxyI8ru9PNiakDVNBc0dykpg2fILNAWiYE9xNX8SQFQb+l2OlpxmUtbnoOCiO\r\nBVMElToBAZ26PMHkRwq7pxlAfHT/UCF8LafvU3+YGfP9mjlxlA3pjaqzOPd0\r\ngjCV2mSMUm+5QFrRtx5vselDNnlAKBf7OWpljiC0bVkLgzCsELWJPKGvHjz9\r\nWuV9CpSsJsphZ5KuOHS7KYQ17mpg70NjuAT7uEFQ6unnF0Prabh3iT1a/CXF\r\njSf5rxyd6IdzZhSYF84dGxyp5sRm1QSL6c8tKKHmaYZwXk7+QMr5k+DnWqbg\r\neLb+bvNzDLmiW7aGGyElH4N+tt9zgyHzdMg=\r\n=KYnF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-48.0_1651509623308_0.6299551876669238"},"_hasShrinkwrap":false},"1.0.0-beta.12":{"name":"@bodiless/youtube","version":"1.0.0-beta.12","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.12","@bodiless/components":"^1.0.0-beta.12","@bodiless/core":"^1.0.0-beta.12","@bodiless/fclasses":"^1.0.0-beta.12","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"5225a27dc92c3938e0a2650eb3287c1a1528a2f6","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.12","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-uLNrsW3E2jfGRtHzyycC5ppwiLjvyjRw5zdpjcI8yH9d+K2ZQBENAoXn50EhsxUCkmD+ysZja21Laff4cVMTnA==","shasum":"d0b90d7ed598e82505bed13c3d412ab053dbbe4b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.12.tgz","fileCount":22,"unpackedSize":229665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHMQzFm+FHyVdzVpViTwXGW5ctWxhYR1b9nBrTi7N7IAiAoYpGHm0a4gaMqFV9fs1QL8b1vIz0XzGPjvT23FEetNA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicBLhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXMA//eyb0ZK1lKlprE6X0bFdjyFxhAxLB3nCjOIw0S32TKTD7JHQ6\r\nxm8Hwztsw5hcxsmrwCR31oYJXgBaRrvyc4j8mXpZcqxFUuwPnBtFfJ53kAGR\r\nw0aQhbQu04RboCFpEubaNyJ1WImLwk9MC0nqyQgGSLSIMaL3LlrXgJ+lmfLQ\r\n+JbMmv7K3w14OBaH37Qab2KXFiMZl1lAZKvmyM/sIF0F1tI6CiixeGRlgrjG\r\nhDgVNUJx8i6Xn94xF9wNBKfu1XGiiakWJTg/8xYm9WGo69zviETp4tj7mKo2\r\nBCiQgs8/YzdFYQNn8w6tKlVUfGQ4oHrxo7/M32J+lPc6am7Wmtto9vkZq1RR\r\nGTj17uw/Mt7uYE26x5Mm5ZxV0HPJiTLk2+k5uQ8GNVsoEJshwlMLEt6xiwgb\r\nnfl2QUlmuWmplP80RmScUhFmP2DPhc+U1b9Kj22rLk1ChqKsCbOB9m/pXJZy\r\nnkvE8wPc4lD2jlv2PaX0VzUfoDzVFOh562WJI3sAOgnbGWBkgpa7Mj2f0xBo\r\n3ZaD13JMPFy/BSAAaZp1mhtZpPOEvFfqsmcKYXj5l+i1H7qLc6l/74yKAilU\r\nubSrga/+wJsPE7A4YQYCSucqyI63haxCYD4UEZqkyvEzNGf64nQ/ofibysIK\r\nXPEjBRh3qo9Uw3o37fuOWe5jEnSLsCvpzqs=\r\n=BS78\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.12_1651512033516_0.32191529859878765"},"_hasShrinkwrap":false},"1.0.0-canary-1553-49.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-49.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-49.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-49.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-49.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-49.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-49.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Yny13sARUQkNfypdM6wnUf1vISXk0Wz21jRRzy37hI6k/qNrjh0LtUtudc4TUNmTIrv6v807Mv90inwTXstYpw==","shasum":"0c538c4ead05ab7ae008b8779354180baeffa7b4","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-49.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeE5TlNr+AV88tEYzUbmiZzOnvTwNF2pkSOaIPMc3c+QIhANjnL6aGb64Y6FVe2ErCXwuFX8WdQhD7sjPVTxSVRbAf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicBpDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPxg//ZPsjxQ0VkgdYbcysWfz3Qgt9sKq+ZDKvLun5N+RWROYHJWtG\r\nSBiPg2lY6wuVW+G1Udt+gSe35uN3PO4jZknt0vBjL8nqKEfN30qZ1/iUKoNn\r\njbWS72oBKBb50qsyBDN4xilZcgy7x4d6w0+Mwq0WudFD9UmNuFq79ZqSjUZe\r\n7t3fR7F/iXxKkNoi3ghV6TOUgt4d5w4LUpmXpO/unP6wN/LhW+HBCJyrR2Rq\r\nghOeHB7EgfDIedyjuJr74Afm1v6pXdriV/tjdGJT8OpJUgnI0Ibs69PgwM9O\r\n2IN0nlaiw0bcJFZ0OKSo7kEE+S9tu9ra6RXAv1H1dpzR34eA54uCJAxtHtJi\r\n7kBFt25dTNybZxNvRJ9e3+kLr6MdM0MorfhI6F7EGvFuPCNn6XVf6GlR95bZ\r\nX9GaX5Jbiw1eLXJe4NqJ/Av+28H42gVHx8FDGDYu0UsbDTGsiEvseem8PDBv\r\nUKqqMtuZQxTy+T6Okox9yqFJmBUeZvktBPp+G3gzI8BaRDVGVsPVpqTQJD+u\r\nwnk6DNB/ObHJpVebTMLIEDIyauxQYBopExAn7Wa6ldWjH5nsVgqNZoEIJtL9\r\nS/JpubylbNh101HiTVDskhRNj5GXDwKllCOpUclQfQV3pxga3b/engYVYloE\r\nBNO36sI6AcJGqdjfr61GkYc9j0VwRgZYlNo=\r\n=H9W/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-49.0_1651513922862_0.49600411610825423"},"_hasShrinkwrap":false},"1.0.0-canary-1679-50.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1679-50.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1679-50.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1679-50.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1679-50.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1679-50.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1679-50.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ZUnRThWUljB+sM9co+WEv/k5YOxsgn1s/xPkGvFgKt7Hs4u9AbbEIij8FeHtrG+qHogI3dyBRdkgWI9ItZA8QQ==","shasum":"6190b8bcaa3fdee7412eae3ec4a2a26f4bf97f03","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1679-50.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3F1UwUK5Tm42fMdwuW95ag4T+60ds1swqft+5eyx21wIgJzhCHO+2kZZRAcNpsf/vxTpWzduwsHL9IuzjVpv4xqk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicS5bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU3BAAnkOtp0elys2pTBVloC58OVBbLN51feH8PW/RW50/Bwzn/f/h\r\ni70IKf2c3Ffke4oMmPU1lKy+ZfNTnUvyNaielqdW4AYSGucZPX7gNfP30g3u\r\n+nDxBRHsx1iNbqLiQ7mbBaCakktRTgLYdJGHKlKPaLUaTVjhOiil3Zt4G2Rx\r\nflLgVskrng953H8fn2zuqWYsZUJywsDSHkfJCwmBtYHD+s19CQqleg3H/zfB\r\nPD4Sg4LZhD4iCvCmpGUO3b170amFiXtv9QFDjaXpCv9usU7sOg5pC7S1QGkr\r\nl25ThuhSZqd30hf/MCghpNGsYRPs9s0Z8yIrcEc108aId1Yv5f6tONiWVPce\r\no0fhYI2wW6O7HeWtFOzVMspYX28aQjXMej36kmJAKo6h6of4Sj+meSNOi3UH\r\n7RZTblfzLXbLYOn2xohow71H/LJx5pOx6FlH2ked0RHkR5P9nH84ni1UW4BS\r\nnEs7INMa50L+1pkcY6myb4p++HE4iihEJcUlUmlOsng5XHXcRwn7Dcwmf9DP\r\nnkOtwGRca5YrrcAIcTd+dKOQle1/mW7arXlHPSwbhF7llQCNYf3fi5WpzD6s\r\nxywMzvMSB/ANxM2QuWLBRtOC6mKX0hkpgu/isCNYgKpkWexTlj8yU2MhXI48\r\nLrhY6Vpu/TuxwlW4dNTdPJDja5+k+TfuRzY=\r\n=Cfcg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1679-50.0_1651584603624_0.5965557619713653"},"_hasShrinkwrap":false},"1.0.0-canary-1553-51.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-51.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-51.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-51.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-51.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-51.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-51.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-o9gDiZwH7joLbqI8FYl+URNwA+jENAJH5adgrfUwVQ2CypYTynQxwpssJukAAX0r4Ql8T6tYPwIPHSFL/0zEdA==","shasum":"4b272eac1511a1d86666015322ac6f5b949c41ad","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-51.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZ6XT6yUM/79PMNds3lIulanyhirvk782tiQnxpF1+aAIhAMzBND+5D5cywBjZBIiw5aklZpAnyN2RpM2KoXwJncpT"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWvWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWbhAAgv2AtZG2Eba9/XVdj5rNKUYKV3u1gWBq0Q5oHHNp17WJxheO\r\n5NjRMzjsKUyeAmzWHhHPOoPsS6C/l3k45ewY2i66J+blwTDvMoBQ5slkTPwR\r\nzN7lW7XCU61NwXmgtKK+UynWBxpC+rs/vSR+dG9VNPkTwKoHi5lRHhCQrewD\r\n+PJsqFA4QTqoncf6ytGUcyidlhQKYylL6zwx66nzJsyHpAA+b96oWNyNGQp9\r\nj8ztw9AwJYL5DpkkuQnhCG48rZe25QXdZlx/wGV++YTgE+UCfkm79ynqNIgr\r\n3DREDjWVrOxHa+blMmKfjesY0KxhZ62yqL/alLcI/12QJFG/Rs4nTiRhXiQ8\r\nsjco5NjxRuwbICdlHJ/HGSqeFpyv89VhhyrpmYW2/fG9Jn+o5kfdOI8ucNTj\r\n2fSLfyEMrsNQ/XR48d2bhbyOD2nBCvAcyDUGoPmW04bMWESJRmnGsxmb5tL7\r\nBBQ510rJ4Ubo0AYev9232HppsVe4AGVBm5pAv3h6yPeAZ3fYI0LLZeNukLHh\r\nyOTBorq6TaB/JBHJRMvyNDRnSdH1VT8e5GmflNDYQYgiV+Jx0v42v4mL+nY2\r\nxQ32jdh0Vs0C87FvVd2u+FKDiBnh0QXItR0V3dpGB4pNFcOMC/4iNyw8ZhW0\r\n4pt1v6eSCucddYp+Du4Dg7VV9Key7IzDRbw=\r\n=CBYq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-51.0_1651600341891_0.53814963076831"},"_hasShrinkwrap":false},"1.0.0-canary-1553-52.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-52.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-52.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-52.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-52.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-52.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-52.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pbInHQqvzLc9p94IwY0cRYf2XeGBnVauvdTkTt0Ur3FYLoAtdhITM6o3lJyKKA4I88v/I/0pD95c0GIUtzCNng==","shasum":"259f165c90e57842ea6b37298dfb642c4c713c5e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-52.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLlWAvjuT6uEXjJUqp4nk6oEILADZWbIvaJv2YlafptAiEAw0kDqIkrczivUXFdwwo/erY78KMgiIFvpD9dWwF9mDk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicoB1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZDQ//fMs4WdxFD7venjtLIQo6N8Fg+PTdiL5cR6UuMK7j9K8uEDpz\r\nk0tDrjbSOetxJy66hZfS5dt+ZirSGhc6zKcaZEWVeMErgJw+sT4l1sQ+ZEzA\r\nQnr8Ecenqolw509KhDjgP9Eb2maO1ZWTlycuUiy7hJh+wcGSp6f7xH2WHG29\r\nC6qm51/8aqBsJrh+8uIp359jzVBXQGqkFz8Ukw6tDDf91HDd21/JVNYOUsU0\r\n/9NBjA8+76pI2amUmFuh0cJsc4k+Babi1+x3PYwRuzoAYfR7jGX7YCtV/CUH\r\nYhIaDALtIZgh6kbEo7znjh09aPZN/0fsn2ywlGrwn28QhV+XoL7hiap9hnec\r\nwSy13yNoRZPDUlt4TszwO1KI7Ib8j1MEgOysEB8L5Vp7jOEH9YLe3bLA+F5k\r\niVgJy6YGQd4CJzHqKiegLEcNMGSwj8yfevj7TeI4VU6gqFtpqGIGlD7Lp9ko\r\nIXQYHIQ4qW97eHFLCJAdkmoC+w4mfTrQzHwgtmQPy18gts17+KTC7yJUbGtu\r\nlgFenla9Fcr9gXUX2gDf5mHeQyXRKEyWbN3mtmeLgx2mh9p9Fc+dxC5Gfumw\r\n6BaIazfBbHdhxzx7D/iyILhrG5eV3iS4TnFys+HZ+FwOwgA8+O/pj34hXXSF\r\n0cYRO/HPZx9hFpw3ylxEgL/IeexXFiH9l+M=\r\n=Kc3B\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-52.0_1651671157046_0.995148250066606"},"_hasShrinkwrap":false},"1.0.0-canary-1679-53.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1679-53.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1679-53.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1679-53.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1679-53.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1679-53.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1679-53.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-2ghmBu8gU1+vXApI2zqBhr15/93Kl03tdb10hBdBGD4dEvFjgVYIHFu7Q/ZtuVa5MqL5UI+Z+b/uJXI7YKKyxQ==","shasum":"57f2ee1fa03de88151f7c33461a35ed25956c29d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1679-53.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIm8POFBgnT5suxT2rE71A3Z0GJjvtOxJUXfpYFEV85AIgdS9zjuUAOnlM3pjYboFU4y3HLr+SR1te6EyQWJQ3nr4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicosDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxng/+JyGEB2zyrStmTKt6Lt58Updn+/hblg0lhpGCHOw4rf/9raes\r\nyHczW4qMt/srVpGfa1LakWeL/bQTMcXN39DAQgqaHI79GIp2F4F35ur3AvBl\r\nMKMuLXP2ItrNpqJuwcGVlEkgD3stgWzfS5G44rIb03uAxr2SopR8gy32mAZy\r\nmhevDMr6sxf1HSuRYoQQZR9+ISl352PAzalBNg2Ha4EKrjz4MMi2b7paKl+a\r\nwlRondD6nOQpeQu3wkt4v0waBlTj5TO8/GO2uQZLCx3KRRrSfIb9CVfAHumU\r\nB/LqFHsLz5gBwoZqhwqORAqbIfdEB8oG2HBwnDI3Tkft8ctDgEeShB2kiIJI\r\nYq2C6VSQkBHbHiD1pGorpFGlTd6eTdSG2Ja0NebwR5IRQBTnplR9XRHCMCmJ\r\nLop9rBjOR5CN3qsMQ2fHsw3A9u85WCLb4A4GvXGCxFBUQWqB+NZunhAmbuYy\r\nJ43RJD0ZmYLokmNcyoUqeMq1nMJqhTTTr6zMXdqVfs8JjQgGp/RtYOg1sgRk\r\nCo760cGxXpAaIy6KmLMqlkhsfNEVuCCzhqX5eJVWJ79DdGscyGxm1Mzv/HJQ\r\nns1+35Mf97VUZ14PAo/eu4s4HFgkXDCSCP2QJYnl7icZbWbPzWs+jJAyWUDN\r\n4cdJKjWMWRBRCzxP0tCR7qqGNVJBcE/X6o0=\r\n=8Dra\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1679-53.0_1651673859074_0.1575793737776936"},"_hasShrinkwrap":false},"1.0.0-canary-1553-54.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1553-54.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1553-54.0+dc7d0f2","@bodiless/components":"1.0.0-canary-1553-54.0+dc7d0f2","@bodiless/core":"1.0.0-canary-1553-54.0+dc7d0f2","@bodiless/fclasses":"1.0.0-canary-1553-54.0+dc7d0f2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dc7d0f2c49020f29296d3a29a68b66154fc7abcb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1553-54.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-l3GhDSRShqGm+G9sjSyT1HoZuTXW0Z6ytdp/lxP2D/1hMPC6R+VucYrhUXBl50zjF4bOOeN6+++yd+R3UCrssQ==","shasum":"f8238c6c20ccd1c9c98fdfbc5aee0ec3a9104738","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1553-54.0.tgz","fileCount":22,"unpackedSize":229795,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEg71b7ZHe2u/+8D0vWBOrCcPr5vBr7bUE6G/XY1+jEhAiEAhMDvutRPyt0hV5MeKXUR6G9MxUnxTFRdYAgOggBV1Lg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJictg+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmptbw//XczmeDfIFwB928XC8+1t/WpmJPt5GxL/CiioBcO7AVRS3SX3\r\nDD9DF5Koqsi8Ync1KCW/pc2jD1YRQmgFxZT526FWfrBfAJk7OLsOH9wpQfy7\r\nhGDn3xRdkfafXjlUQPtOEYYE6U9AI4X3zWouTNM3HjLmw8oN1jhw5xcmXLdh\r\n16KmSh41uKIj8X9VYK/4UCqEe5FB9o3jHXynPnJg3JHW5Sjaf2mbvqHW4QNZ\r\nrHQsujYlbAERPwuCZB4kQ+dVEtH1+LW7gb1Kgjg8N39ndxK2A0dWW5LSCElx\r\ngRjoAuG2ACuBtbWD/XLjkbjw6agNMyDPkIqHilUHTcFO9qcgROKJOkc9Mt0N\r\nsHaDUMIFeGHHDpJmqrWM/S5FfH2IE2kSxtQTb8+S2ELsQbL5n0zpWr3j9H40\r\n7bCplloDtd52OoM9SzGTsbaJN0WLijF3hX8hCrnRUzzIvtAuI8YL+Qj+JMhK\r\n3wDizsUHNoguXMR/0sDdje1nvJtOcpdD2NfMvbDQ30PIpiFzrQ7Ef9tluLnp\r\nkXw7aZArQM3AKhC7B2m/IqvZCYAq+NsKWSFAfpa5QWrVe7zVABppwTmKPXNc\r\nmUqlYY9RObtejtAwAq/RPBL8kz5tjqtrVVR3PDgkz/BstLI9Ccp0YeTdZ2wj\r\nuQDRT2btPrnhEEVQ0p3ZjV0/bKYEec6QOKc=\r\n=XARY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1553-54.0_1651693630556_0.07060042452502047"},"_hasShrinkwrap":false},"1.0.0-canary-1682-55.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1682-55.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1682-55.0+37c7698","@bodiless/components":"1.0.0-canary-1682-55.0+37c7698","@bodiless/core":"1.0.0-canary-1682-55.0+37c7698","@bodiless/fclasses":"1.0.0-canary-1682-55.0+37c7698","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"37c76988c6f61937bad520d0521fa34a1775c04f","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1682-55.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-OYqI1a9fVMhZaebYA0EE7K66s7HZVpC3SBhhBnPRxJ7y/FqK5j3EXFkPhA8Jo68+x0sM6i6YJfF9R5s4PQ8oUA==","shasum":"3cf5b039601005ad3848bebe8d4b063a80e1a546","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1682-55.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD490EoobgAREgerXPGCxFEZVFXIgUgIh+WvHysWzeIyQIhAJ6nx1tJhN9ctXZ2d9q6p8iER+sybL2O0FT/nez6EwaC"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicvcdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPPA/+Ppnd1vZuVkMh3m6inw0+TeO2+ZcWy/bNPsoz4U0IifP0wJ8b\r\n9vMSFioOrkQetjl3iW5MaNhcIF1lT6JsoO9W8tGJ0bM8ZNe8QO948XV5hInr\r\nfC9L/2fG3qs+GlQlaf35ulOIX78RQwBmGKyXpuAZQKgw6jRtTrWsQLODlADK\r\nsPEywEs+NR55hPdKzAV/F5GHwN60AFL6k58jYAKa/WdOgHJK36CZ6S2X7e8y\r\n5HqtnD0nZAs7Sk7LuUSOyi2wBj00s8LMLQM6d34lYN2ZwYt3x+Gv4LhjDRlN\r\ndj3XRa4GQkln6CN/1XfuBVmcDV61zxVtXPJ2mklys1swYQsKKU3nLklpDRPH\r\n9rR92+dG5C5mtOH20md92pt1aBznwqcl6cvPLOHFoI8JpTTEpKX9n2OV/ju4\r\n5kDKNwdANLBUZEhZNFM6UrpVtNEz5pZ6bRKeyU980Ioxx7u0Gi/oHRgL7BXS\r\nW50n+2PB8jRK9KtSqCfCGUkNUKUKmqpyTFa2yEvV25VsVpT5yYqFogNQ6aUa\r\nvMAsxoHGRtBwIf2+b7N3KYVnCkvtrIm91Y7ZLoTJfOLRm5V48fELf5A6592E\r\n76E+awyYLhiUau/dXF+HsB5esR1R0URycUldHGL+IWR9u14cNvoW0xM2CN2b\r\nGnLYe3sQAzDNkV1FMbHksebW9ubdsSJOLck=\r\n=n4zz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1682-55.0_1651701533344_0.925704689121045"},"_hasShrinkwrap":false},"1.0.0-canary-1683-56.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1683-56.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1683-56.0+37c7698","@bodiless/components":"1.0.0-canary-1683-56.0+37c7698","@bodiless/core":"1.0.0-canary-1683-56.0+37c7698","@bodiless/fclasses":"1.0.0-canary-1683-56.0+37c7698","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"37c76988c6f61937bad520d0521fa34a1775c04f","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1683-56.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-5ChCbp6j6JfH+uztOLBuWZLcJg3cqjYD1f1VL1E+PvKCmIfxhMY5nuxSPyfYoQPCwvdA6YvA8XT4ONjjq3iusA==","shasum":"f19e7b9deb52a861cf154647c3c9bc84fc37d552","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1683-56.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC//SHASGc4ykpZoBG31ebp18l/LvMA+YsrKp13rOyKyAiEAtBeHR0t1YUBqynun8QdDWb8j1WUh1hWQms0u8Ep5JRI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicwczACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+NQ//VbH+BHdkqnkCug8klYXrzCe8q7N/RAcI+jiS9EtPXNQ9oJaO\r\nsgW/3XGaZ6GiPdFvsCMkVe2IEaLjIm1PP+Jm97wRRj6BZm2AClzeFsKnAUKS\r\n3iA9XxKp2kgk4GuKIomIl82s1C88J8Kh8P2WvkjRfoxxcGr74tz7ZEptupCY\r\n/bmlZfgLwRNR7THadwvkkRm0aGz3PaioD6prtsyT1tvrSIn/ICFp47hK7JLY\r\nTYowJJ7oMZvKbec4XWCAIY1ijRwESK16q7V5h2tiYzuYZry65dQ9+tFn7wqi\r\nPUK+hOEOMWRR7kfvczO7cHMi78sTjwYlpIwyavjfvwemy9cQVBGumFU/rm8g\r\ncNv2MAUXhiFIU6yFVxakvZMw/Oy/+6buV2BgTvf3wVoPW0IkMbN4bw9QXjiw\r\nZ+sQdGuWtZf2MF5M8msNZAUVFEvBPyUqw4PrCnYfuU6f3/yDYELYcHmZ/4Bk\r\nvcPpmdae3jBcV40tRlNBrCOMT71/1elIcru7DY1LHFTkpVBXaKlQStpJZzgf\r\n8beON6T1HS/f1RHw+096Tu4t5uhLvIISkgex2tJIH2c+w9juSpdJ55e2WDw6\r\nKqqoZNX+gRwAHWjJ0n+z9b/QMVIp2HRgjs5bozrYYAUplT0pqHsruozkXWsy\r\nJmHYaGLKxk1GwrsbMlwjFOl+e2KP3TXNw/Q=\r\n=I5Y6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1683-56.0_1651705650934_0.18197444624064696"},"_hasShrinkwrap":false},"1.0.0-canary-1667-57.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1667-57.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1667-57.0+37c7698","@bodiless/components":"1.0.0-canary-1667-57.0+37c7698","@bodiless/core":"1.0.0-canary-1667-57.0+37c7698","@bodiless/fclasses":"1.0.0-canary-1667-57.0+37c7698","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"37c76988c6f61937bad520d0521fa34a1775c04f","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1667-57.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-bMPw6CUDirlEOMpiN1lW9BvWoTEf63Ieg9x7sI2sKoUcCUwz6pHlS2xeINPdwkkosLbpt6TVXBpEjTt+/UpmSA==","shasum":"1e548c295b44f36cd21c023cc2abaad57e3ca2d6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1667-57.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC86mclW7abMYMGICzRtESRFed17pAhb5dDpXp0dDcRVQIhAPTVXezOus1BNE1MjDzA3VREgWiJs9tdf6R5L5xCUuDv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic5+rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW8A//VerxhQs1Qgq1AJpit9QgFHta07hmq+5a9DLEvVs1tnFNHBcL\r\nGyaLFRFO+d5JpU4Dnj3BnwT6v4nQ5JPeWCpYmxAhr+RTX7auOgNjFzbSDlLx\r\nklT/wETQBsk29qzYMo5dT5kpNQymT41usydlGyhuuHs3pJDyDZmJSXZfiFZ7\r\niP6r+zdIeK6o+2BKEoST6WFICxOnGujlet6as0AcePJcBN+GWDosKBK7Rbbm\r\npo7geYScfdkBSdfyRuFRmoBkRQIQ6frQh9cJd/BptJralo6SRK9WoJtfM6n9\r\nrRPU8eT9wTIdasQT4pQAtMrob8E37eSX3idNOGqtoNfWeNq+IOa1uv5z50jx\r\ntoFLtwexIEeziTFhfm1AuO8lV8byO8bkgOprYLZjqJP0NwvPtm91j94b55dd\r\naRV3/fUx8yhdIch3cS3Aisgr3N8vMuWB1PBxwyrKjf152a7UlCKExEnTmpz4\r\naC5ZTDuQC15UWgu0TJLEAD6P/HgosBde0BR9eqksagXNbuF3I+x4ENR3bcAc\r\nufA8FwRFSzNCZc+GeaM9+xFLMXKNGO70hZ+0mqTUA8JV3XxXCLvlFAHrpYZx\r\nMMh1vUuYRe68KROqDi6M24bmYqXmJI6VB5UeuF28sGSY6X3xrQrxcStxIXw9\r\nWzn5XZeWMi9aELayo9ad1DUH7plo/RA1xaw=\r\n=CyCB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1667-57.0_1651744683338_0.03831156370055733"},"_hasShrinkwrap":false},"1.0.0-beta.13":{"name":"@bodiless/youtube","version":"1.0.0-beta.13","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.12","@bodiless/components":"^1.0.0-beta.13","@bodiless/core":"^1.0.0-beta.12","@bodiless/fclasses":"^1.0.0-beta.12","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ebe9253858950c07deb76dfd5e5bf683f281a597","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.13","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Iii9okV24/3u2lDhVt2Dk7IsyVbhLXzlWsOBcgmjkwXjMZha6CfvbCM1iOKnCtw8nPtU9dWC6hlfIRysB0rKlg==","shasum":"999d1a6f17bc22cb9b55ea00bb727350349da6eb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.13.tgz","fileCount":22,"unpackedSize":229665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVhFUlHPzd/oGjd9eMHGTTt1EIDRao8//jDeKURkL22AiBklT8s5hQl91rrJLfWZb9p197sZjFX/E2SGPH1IlhWvQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic6IMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS6g/+MrdrSqB7UeOCrPkBlJ8svXU9PwPWZGba8Fhl8y7PYgreB3yG\r\noNJzUiQ5hZZfxlcZO7otpH/cCJd8ne7ar6exPx6hO6aSLnPlwtO9SeNIsCis\r\nMxux4ZJfszFeWPTkF5e90WJz/IfvnDYAmNeoqeA6hljA7Tj/BPZ69WtzAy1S\r\nEvfnA5M5ptKC+34zzmAp9YBvIOQ8+9lJ7h5HUjhzC5It9+aEhGvsdnfPdHgY\r\nDi1mqVjlXadoJG7MXQSymF+uQxt08Znwss9Z2cnG+zl+Zy2FLJ1wna2gZe9U\r\n8VJJVTavZY0UKlrrIU1p6tcNapUsyU3LaNiPg5N+HI+n9Iwp/iogCGW62qrc\r\n3D9Z6alvQyh0DgqVIbKh5xCg0eckhyJxBm8hOSYhBzw8Fedr7Z18E4lIxZmc\r\nFi2bsLgAGDvuoVbFjBthCI83C1Tk88H/hfD7JP0/ac3VHapU0zIQay2dvCv8\r\ne+r0iW8Qte7geTCu96v8XKsxo0efg5nWiqurrQkQhMZUqNKvLnMF1IMVsdWF\r\nxVUMhrImHiCmkBbLcXYwoPkvnLsxWvJBW0f6xIC9QbOgkBz8t+s8sKzuJEQT\r\n+TU2Bx+8SvSXIyOBc/JaEZ0tp+hAmQWuYKRJUkUpevkSS0e6EEs9wt9R9bKZ\r\nWbbHM95efeeaxrYQXSfMGKhMXMJX2ybsJCM=\r\n=hDoF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.13_1651745292152_0.9581511695688127"},"_hasShrinkwrap":false},"1.0.0-canary-1680-58.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1680-58.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1680-58.0+ebe9253","@bodiless/components":"1.0.0-canary-1680-58.0+ebe9253","@bodiless/core":"1.0.0-canary-1680-58.0+ebe9253","@bodiless/fclasses":"1.0.0-canary-1680-58.0+ebe9253","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ebe9253858950c07deb76dfd5e5bf683f281a597","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1680-58.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-6SrC3fOM6Ma32YGvZJb4NDdBzJ/bj9/aGAqDUuoTEcMQx2BjPhyfJcPprxzNWUyx1ibJjI7xfo+8tohstCTcbg==","shasum":"b854f96cebdec8d3be3f461b24fe2057bd027595","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1680-58.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZLNBNgPUrbvu9O2MMjO6LwQ0FT0FgWWC7Yduj3aOZoQIgdfk1tW993zUFZIKsc7Kk4PxvwqU/4ezkMcN9wb+Lrng="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic8XrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQ5w/+LzfkYDJzgXqPfnZaZfZqjXdyLgZCLvoEdx4BM5Vds/y2BK1L\r\npCMkRlpwnZdAnRToxH4Oz4h9gj9/7xq1Wb8B59dw7RIbG39sGYW7KjnAspry\r\n5EYFBmRuqmVPdZUHddDBP84iY7TiGAB8NwO38Yi4zDJRP2sDRmNgYvxvHmcU\r\ndz3UTBfyTRV66VqYok6zAz0D8B9BBENvxrR4UOfmmZfaX0Yg8rF2tDq9EvIx\r\nV7WYyiboF/hZFvHVVjie6CtRd2t4xQ9WUsKbPKU0ojc282vyFWFCPYK847qk\r\nzcQrqvPFvBslqquPWl9SKl2TQnxdhcLw3G0Nm8FdoQGkWTpUgz/NFzcsI+M2\r\naX/cYjXku0Wq2MjHYTGL59LG8MgT+UsiSqxxgaVzMncsWeTTVUw2SVOukNjr\r\nPZShU3/UCMZva9ntjyg0hPSoBkHHnyXuE4xxhbHNTH/eeH1S0oqv6p4dI51S\r\nSD//ifWSJ6oYtsltyZF3Pd62tSEzkkyJ3zaNt7M9x+AaqiWz+qgos7ZXY2VI\r\nD0tsThVNouQsdy/7+GHoJiIhAuYHbaw6TZEPY0spxX6pGbo6O5T3MG2Vs257\r\nbEahIRdaeI5fDCsl1pl9NDdGIvxMQY/Vu1akLONWfVEBp44BIWv5F1SlrGsA\r\nYJwK6MrbMYcDJGQV5jhsqEk78efQYuUGkMY=\r\n=kGv2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1680-58.0_1651754474866_0.11856539494119822"},"_hasShrinkwrap":false},"1.0.0-canary-1635-59.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1635-59.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1635-59.0+ebe9253","@bodiless/components":"1.0.0-canary-1635-59.0+ebe9253","@bodiless/core":"1.0.0-canary-1635-59.0+ebe9253","@bodiless/fclasses":"1.0.0-canary-1635-59.0+ebe9253","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ebe9253858950c07deb76dfd5e5bf683f281a597","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1635-59.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Pklm0+63GBAM9UYTTgZsCWYcngC4euDcwJLFYO2symS7Hx58hF19Nea8XIvgLNzZpEQQs7LBmr9sbHHL149mTQ==","shasum":"79faa1be2a5178e297c4e4e0273de5b6916602eb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1635-59.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfwQD5UPgdlGm2URQg1+3JiEN2/UVdKeNqH8bdNvL78AiEAooufDNdCF+SKo4HXMsC/ObDuoRsHGs3TikV5Uzx8RW8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic8dgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9Yg//VF/hth+LkmtvNNJUqfkpg3UlC5+EZtNvHjQp2Rk8b6tEc411\r\nDXh0fxzBT4iGDBmhey8tpuqB4MXu/Xerq0oyInrtbqZWbEvqfFunllNflA9Q\r\nDNWuDO/6sxKTjZe5O3uJlvS2Ng4b6vcGyQlFr+JAL6DcrATviBS+hGK9Gmdn\r\n6Z5W3zF7EwNqHmQHgffIr4xBSKdPjFgtorlL9B3duzVSspAJ/t6qjpg/qHdr\r\ndJgegh/O8d7EPA8yCOQkRi19HP5StbqIc/fUbdtLB5+/kkzvVy18K72YaO0P\r\nSBvEr9SaAYsKh63PaSSlOBB+T/lwzvO9aTFL1OvJTeCqvf1jIQKV51juS+g1\r\n3wFGBvkgn66xIXhE74Q+WOijj3P7g34j1M/YTAp+ScdzQTgaZst5sCL2ld6y\r\nnf1b0KPW1MspL8euyEYDXv2LsP1TLguXWeiSaQqQayHgNzn2ZGPEU6aWOxS3\r\nt77NWt1G9xD+pgH7e9WMgHv/SvVOoGQEIuudotJiBj4NjLD4fslAIlFp5/U1\r\n3+lBuAkhPSfanMW/pOqJYcyqYlrBJIJ+lxIHQKnOi+XKyRScgu4E3C/epjsH\r\ntfXrcDkYw+/vusBZgAwHyIyxODAdZ5dELWaOJA3e7TxLp5eLt3ZsF8eHJYo3\r\n/kUW/w3dKwbop74WxdL9Up4LWSvEAY6VVsQ=\r\n=3ko+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1635-59.0_1651754848668_0.08841808700298759"},"_hasShrinkwrap":false},"1.0.0-canary-1595-60.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1595-60.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1595-60.0+ebe9253","@bodiless/components":"1.0.0-canary-1595-60.0+ebe9253","@bodiless/core":"1.0.0-canary-1595-60.0+ebe9253","@bodiless/fclasses":"1.0.0-canary-1595-60.0+ebe9253","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ebe9253858950c07deb76dfd5e5bf683f281a597","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1595-60.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-cPxe/SooLlLnYbyyUxjRzZuZi+OVnznoXZeEr94WJK7OJO0o9ZAwiyo49oQ0516KHCwo8crhc4LnxsFvw06aVw==","shasum":"94c0a192700e477e481e163f13f6ab3a66df0387","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1595-60.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIb/RTX2/kvboPBSIpWziEFvrPwj8rMH3Bpz1eYzJJeQIhANC7XWKLffoxxqi4gjrwMQIY+AXQUyNNTFoKkf17LAkN"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic8fbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTLA//bUjW571cE9g16h2asJXn1J+PS+7KaZ0EVozi7qfXOrqoobh5\r\nc1qQC346pvkYFKpDQHi/tQVpIotSIwwBaVIYTIfsJb2ldFNoZBN+7YqpKtte\r\nU8XJQTSFZ89652H3Zdc4e5m2vcmdTXLQFVJT2gsfVmC/JycnfKZkY6zU3aKf\r\nCh39mFadFDm4eUZUby1l61tKkPc5/+BdJ9J2yxBsfl5zapqWAv8uHd7QGvl+\r\no+aNzUdWNB1cRdAPdTZ1KeKnhNEQW3v6UBBr1UyVtFqJrDLxgAYKQAJrM39x\r\n9r5zAxp26tBuybBDndxbZ9GYZlOgRsFEbSiNjbmhy8Ga3WUU3uq3VOcAD7mM\r\nIfuo0zBxvdmnKEhZwiK+iv5IZhp7ITyAoyMyXYTwTow7D8Fbh7d3gz/euunB\r\nc6hq/BTHHNp+xyZQjqnpTr1fluJSUG5kZhdQFigFvd0h1+aHWVsAB4oSEMTt\r\n2X9yxHql4jsnykO5meQXZwoZL8Eac2ibGDNoZ6qjUD1wD0tNfEsI2mxN/1GB\r\ngRPNytvdp8yS0lcugFkwsP4PHdC5Qb78/ZFcjoK0bRQZ7QUUBVhkFAs4WKHy\r\nqkhbKQlnRQk/k6PqNYKJc/2mN6IncmhN64+wtY3NxEY9j9WsR9ciTbozxjBS\r\njoZoruK2wzB63PP9YVRVfYAYOzHoT3C1tq8=\r\n=VsHB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1595-60.0_1651754971656_0.595778554401458"},"_hasShrinkwrap":false},"1.0.0-canary-1685-61.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1685-61.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1685-61.0+ebe9253","@bodiless/components":"1.0.0-canary-1685-61.0+ebe9253","@bodiless/core":"1.0.0-canary-1685-61.0+ebe9253","@bodiless/fclasses":"1.0.0-canary-1685-61.0+ebe9253","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ebe9253858950c07deb76dfd5e5bf683f281a597","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1685-61.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-SxuCokcgE5kF39bJq6ECD5kH8VAs9senauEw49pwPaBxwKar5RgiAWqmnOcgejazXcfZBT7bvlbfY99HSX2zpA==","shasum":"3d7a6ec5a2c662cc8a64c48cb26b5530775c4641","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1685-61.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgUQIuwQ0rK9WmV5hv7GVlIo/SD/1YDiaF3M0TD+GaPAiEAglqvnKoPBWBjE7P8Kev8AHIT5Y5Z4fn3q0TEAwMSIZc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic9RaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN4w//cwm/HdegTLq2ls/GS55Q9aTQcQFPK314TQnRYQQwQ/1hfDhU\r\nXye28fA6lomto83py6xoskl07gtALdNMleRLHCN3as9DJA/woDgbt7PTjvaP\r\nuw+4/LZKu7LO8q5r4Gr3dYj0tsvFASzeoWm+m37rSgc7BXTjFFJXmaz3NeGg\r\n4ELgL/97gJtgjaUmskZM40MkClUxM/kd/qNnidLi45OVZcWqWSGZZ2wA217V\r\noKk5O02Ojurkj6mDIHeSIjKRG238/bKvrNltWCH2DHLs9l603niLs7A2iKBE\r\njO+LKjAu4VMCKXMMMrFJfXCreik9Mh8Sm4nh/Oy9VqKYcSCrP4+1xSF072tE\r\nDGHRhznjS3nYQnYJMwak+4qMZ5xk2fJeJbUobVIZeUZVoWtIbVwL+ESdBRKT\r\nX671gxH5JvQh5MVSHR9ZuyZIaWZa//ErqSTgCv2jbcwU3x1dMUJWMZQ/Z+Kk\r\nRwEYz0X2KgPBgy42dugu4BUf819GPOQmfzJib5oBK4WK6Yi0P/lZrUFfDAU5\r\nJbqZ0CpUzkQ/Qne2H4zgeyUJ7nRmesAZiFCmkwvpIoPvPuRVKk0DlYPhXelr\r\nVwLHaFfig9ydLpphIjZULCwgxuWRHfaYB5FK+dk9nrTd17Varr1yzZg9zlSZ\r\n4W63DRHvM7tOz0LLIOD8HUHQB0guqkQoqGo=\r\n=UZN9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1685-61.0_1651758169783_0.20790787596054638"},"_hasShrinkwrap":false},"1.0.0-canary-1671-62.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1671-62.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1671-62.0+ebe9253","@bodiless/components":"1.0.0-canary-1671-62.0+ebe9253","@bodiless/core":"1.0.0-canary-1671-62.0+ebe9253","@bodiless/fclasses":"1.0.0-canary-1671-62.0+ebe9253","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ebe9253858950c07deb76dfd5e5bf683f281a597","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1671-62.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-/ZYO7RvUBgb8QyqROUMTQ0qn3eFu0IMddBlB19quqt4Cqba1nflkPGUYx0UtIBce3AZbZ88IctzMqifsUW0TVA==","shasum":"2baa79b36468a8da1f995f616043bcdd9e74afe3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1671-62.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHQEiUGt7UZsZMtuedFRwlmmrVvWw/Z3VkR2XjWZ4FbwIgGKuQJtG7mvO0UI3DiiLFUAzfz0mPUxezbAY2imd5tMc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic9y7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLWRAAiGxCnzILfWgLIPsnovYRVCKHsb21034c50jY/BZ4hOIZSH1O\r\nfeki40puGaUCYZb49etI4b3b80y6grztyxMdkYi5H6f38gJW+P3AZ/LYsRc4\r\nNfD8Xq24kHm8Qy0xI3rxKpbFMRHzbYqaIGd2H93EhTVdFaphEM0QcdT/D8rt\r\n/Ntf0dBzZd7GrAqFDvPmSQFsx4ayar3vNcaeF9O5++WxML09szFUQX7pNXaj\r\nV1aBpiPhOiKtCLP2SH63ySWmBed/0yo48FxcyZdJ/nhbBtc5s1gsrL+q3TMF\r\nCH90oKbmoXsL9g5cCrkbfAY48PXZfJszU+sIofL8yEwI0k4uSo7RLON6sjCY\r\nQkOTISPhHnFJP7L0QoMsgqTeY+hNrA8RX3TIFmHc2pTBqKR3fSGTJAmpokHM\r\nZAfAo35L/r3WHRB4P8vgPbvTIrT8Km0j/YvGg5DFd6oQsGsIFPSBqZEWRJw5\r\ny0a0/ghWldWAHsPqdS1gBrVhp7ckB0kYTWWc7tGASWAXEO2pDRqnfDXNUrMj\r\nIDIvN6+safquTF8YZYPC1GHc8NtIm4QYldIFxy7jeviAUDW+XZddvNItSf67\r\n3FLgWOFNvnX7fNueCOThDz9APXtwGJKL+b9mdcLvZb1lTtKnHI7J35IhvQ5X\r\nn9rOeyJvJPbIfOCOhbTT/dzq5ZAWnkpsHb8=\r\n=JnDQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1671-62.0_1651760315199_0.46957859997287543"},"_hasShrinkwrap":false},"1.0.0-canary-1500-63.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1500-63.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1500-63.0+ebe9253","@bodiless/components":"1.0.0-canary-1500-63.0+ebe9253","@bodiless/core":"1.0.0-canary-1500-63.0+ebe9253","@bodiless/fclasses":"1.0.0-canary-1500-63.0+ebe9253","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ebe9253858950c07deb76dfd5e5bf683f281a597","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1500-63.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-47ubtcxB7juOmvLXCioXUpNiGRM7zFsADQx9CDH7wS3xmsxoLl/5wT3vuwEXN9/HKwEjGHsJgStGWj7IDHZn3w==","shasum":"24b48a72ccdf45ab96e5603f7ba316292e75fb3c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1500-63.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZhb78yrQIs2Bu+zN+D+9V9YCvXqez8ji9eKhozfKS8AiAfoTbVFH+9phBVdixEe0D12iHH9rlSKDp9Zhhy5hKvXg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic92YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry9w//Uv4wJrRi7B7ShpqFEyhtIUVRyp//fSTNuVWS8STgRdtYpl6z\r\nXUfOaHD341kMOWTAqCjGHqu7z8lXX89fvhJbHewRgknaG0FNiSPH4K5qF/II\r\nejmMODU21lHqzuJ9hlz8eA0m7P128rPz9UEoM2ClHCWjA3QihBKPZy5zdula\r\nYcRTXcIxRjw6fQpJQh0No16rAq/XnttUdh9aOYBAbhNqIRxp2y8JwUPzWx9p\r\nz2gwYg/c7XFxUeGYK3xaSsSMQm3XxqOV9iFicT1BaUMyNSAotD2gsyPhqjmn\r\nd9BG9zRhYs9Zo4KXBRLDwTlAS62V3yn2JoVy4dEL9cbRAeBgZq902HaGqtaM\r\nYgPcaujj0cAvo1WQyrF7mVs2QXj7e18s8gYhGsyjh3KGVtgulEYBASpJOXRB\r\nu5CeZNroaGnAWovlTGgb2TrU1StjNOPTzr/8IFR1vFHhI1nWx54Wkg75ktDw\r\nD5CztSOotA7/QS/6HIGUNatsx9700AbgaRMwCEepXW43y0klscczlZTOzWOH\r\nE7V8cEm1cqaLC2ePu/7jig5Tj04ugLlufeCdK1oM8XB3k9sorUCEEgL5yjfF\r\nxp/lsSID12TWPXWUQP/G4EJpgpC6V2mQq8KmeTRs0C/+M4vForBLizMWCCAT\r\nJY/j4qUorcevsAwiX6+x+Osf6ZzQMcuy8wE=\r\n=L5E5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1500-63.0_1651760536264_0.15275747079811075"},"_hasShrinkwrap":false},"1.0.0-canary-1680-64.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1680-64.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1680-64.0+ebe9253","@bodiless/components":"1.0.0-canary-1680-64.0+ebe9253","@bodiless/core":"1.0.0-canary-1680-64.0+ebe9253","@bodiless/fclasses":"1.0.0-canary-1680-64.0+ebe9253","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ebe9253858950c07deb76dfd5e5bf683f281a597","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1680-64.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-mAxBYWMQ9ilyjtzHnhAyuDfTDa1HDDMmErnWDiLJbhnDUzJTE/y8Kl1hpc+pCSBKK+5RqpGKuEqWr0zzFjf7Cw==","shasum":"258333e1eaf39dcd1138b12a742507aa7a7fa205","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1680-64.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDPpPqzsbHlZg43FsX5LZD+v1xbPQIL1PT/eeELv5l14AiAWUy27+IsU+enoeOIpoYjkjimIpIMROrt5n886JX8sjQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic/hxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrv0g/+MXt98ENSbP47p2AaAlTj+QbZoj1sAPF9BAZIN1WT59bU3Nq3\r\nnZlIcVuIJue+ZSKaAm0E1sHl4jvdpITxa5NH+VAQpL5gZy0LEHM9WTF3XRCf\r\nWhr4ollKQEpIM9deXMuxs4CELEOwlZUSZrZDzYVq90Uexcvtw5xEFLSTRurR\r\nx6NWrQlu2xPoE3gv5/o49g5DYC83PoizOjVTrGZOP+cTqCG1XLRLXM43G9Ky\r\n9DaLcdWKb2Fk6yg8i29efBZ4hZNYHZoHCB26taKQwPIncBffu65KJDKQM6Ex\r\n/lpwMHEg5kqySlqA3jxtJJMaa0/iB/gVNbc664QUeD36mmPFCDhWAbUuzeSC\r\noiGbw2M20HmaBG8JWW8+4T6bfPkYZG/jWI33SacPq3rvRShOxkepVgJaHKpL\r\nIVZqOUIuCgMZlFYtTlPbft+qb4th1db9ByY+X4xWsE/utXSBzK8epG6Vb5gW\r\ngXDPu3OW8buO8P7kauCoDoZBn9cg5LfWIEqZSI/xCb0Igj5L6o+n2TfOU9im\r\naI45FHHHUFgmiPmQOEmsLgdxV8widfDsjMKZjrSb4RapwclcMk7DTaDbGvLL\r\nMy51ERHDTit8C4tlJKHPzjNv3ULBNAtkvqm8Kh6+YhRcdRtFB+EsTR28/cCg\r\n9x2zHxNFP+rvH1pe775fi4ZGyUWWkrOTMwU=\r\n=83Yp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1680-64.0_1651767408713_0.4462313867112122"},"_hasShrinkwrap":false},"1.0.0-beta.14":{"name":"@bodiless/youtube","version":"1.0.0-beta.14","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.12","@bodiless/components":"^1.0.0-beta.14","@bodiless/core":"^1.0.0-beta.12","@bodiless/fclasses":"^1.0.0-beta.12","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.14","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-5Uf7mmIXaAeE0L25r0F+ka3RJQ0Ys24yLbAYYz3am7ca+TZhk3qhGOMqXeTgF40ijgN6nws1vUkM8ypvin0MYg==","shasum":"dedec1edf4a54db75f9e5ce3ed1504eb0ac04b26","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.14.tgz","fileCount":22,"unpackedSize":229665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6AeIhp1acPRw/CDqbjdHg63X120ker/s7/ugMYes2xgIgfwNNj8pCN0/mBlOzduX8E6i+pqA8I+GkjuLGItzTYOY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidBJxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTPg/8DkOz/XT5vnEs2CC24844VgAqpCiN7mLtXX6r1ogvAvaMyS97\r\ny7G5KRw/XIagxR9QgG9dQIc8Ib/h0245Z3JTkX7yVvaoXwCZQVr07ppFeWMO\r\n6+TdwGrc+edCAAeM82puss4McE9mwFdqHnUjbHILrOamMtT0J52VJ+VtNilM\r\n4HsVUNhSKfAoicHW6+p6aqmJvoR0WcPofI4cp5GUolhPcrN36SGyHRzltWmc\r\nPoTMYd8pj9n8IffXn5NBLxcHL6rDN4zA2fzu3UJebuhFxVEXA+CLPYueY3ST\r\nXwzDWefhI9ZGJLXZvPttEM4aLe38BQfRaJMGttIy8P24SmYit4QvSPSf1l0w\r\nT4MlgbQFBYRsR23vOkZScxR280HklMjVn6+96MSyrUQ+eZXl+jBbxk+NNdWu\r\nnK6kXHqqzYMIwF6kJRMVuG9RQRF5eae8eYfEWIRjWQYN6njQZ/GiS6EZaJoM\r\nGFRZO6EI7cn4ys+WEb9AVJDvbcxozTw1+ooteSTJBwFnrL8bEFQTB9lG8e67\r\nQzqxlGoskDu31CBJ41o20uO49UnPLGlJF1hG4tcxwsegyC/UFnSfwrxAOwXC\r\nLcqixTIHGJRKncjuOwcdH3uVWbkJxLTjkLPIJgAl10r0BzbU9yTrvSeLGp2X\r\n6UJxNIImMbkA1yrIPRCydCYKukk1NOfO2OU=\r\n=pomD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.14_1651774065546_0.8790125053908182"},"_hasShrinkwrap":false},"1.0.0-canary-1682-65.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1682-65.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1682-65.0+b1752c9","@bodiless/components":"1.0.0-canary-1682-65.0+b1752c9","@bodiless/core":"1.0.0-canary-1682-65.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1682-65.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1682-65.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-gps3a7Ujit1SB/uOfLLvavNuro3Z8nj0iqhNtu/zbF8Japt/GCXmRWETvl4ur4g5BZy2Mnmqzz8tuFwcY372HA==","shasum":"61fe08f4efd84816ed0684571a9a5e62c6042643","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1682-65.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9dZewSmtU3qZ8ALrU9aQwJx7xLs0VaPlvfP9U/1Nt8gIhAKGd1ZQhxzseXDRVcShlnqRf2n4iyWVkPDIgFDLQlQwS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidBTrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyjxAAhBWoa0QwSyrNANM7Sqmjg1gNwg7jvwGjADar2UA5hNx7XYUL\r\np7r3ujICA3MO2GdIhByd3sZclN9ju4T/a6Is41eRhWsgov01ETvaY6etoEbV\r\nTkzM5ABAZCWqm4UgVtQalGFGRsD/BqH8QjCbJoH8v8+6OwyAlUHfDat4yeSs\r\nxzPyGc/Ad6hMWkgxFQL4PTcxQGzaAb6caTY12BmEn4Lv0MOYP17A3l0CGwLB\r\no9RRrV1JrrSAbTPHbJbZWktRkLTDjkdRAoYF6noIXnNO42PhOMmGfmjWKly3\r\nlKEv1JcKqlfEHRsOva/lqbxo4v7f0uEcrgKR641bD54lKWCaHOigp8c25yLm\r\nLkVgGj7k6hivnEz2yqJcFcIx7ufFpRzeuZuW7vna5FkOAoOh0s38TFFmgdfU\r\nt5ROR3075uDRT+q+zvJ4j+ILJKLoJOaQ3pmj+EFvSB9TlyfG0x8I0HqL5yJd\r\n20S/QkgzyGD1QEfsYPi7BVK7ivF0War2u6zKJpm7plelXzUfcOh/6R/vF/SK\r\nPM+1k6tmgA3+UI8ETcm9uA1w/K5+tGdO5lXV7WcMhfKhtIrcu3lOcB1XLliQ\r\n+hgVyCU/Ltder5kuR+5i/IgZRhWonRDmXlbm6naJEmQqwkHSPWE6tUJD6eH2\r\nDIaucN2ais+YjX0B87OndqRV4nlmsNqoD2I=\r\n=JCI9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1682-65.0_1651774699561_0.9575298434027617"},"_hasShrinkwrap":false},"1.0.0-canary-1500-66.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1500-66.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1500-66.0+b1752c9","@bodiless/components":"1.0.0-canary-1500-66.0+b1752c9","@bodiless/core":"1.0.0-canary-1500-66.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1500-66.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1500-66.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-NIf96K+INN/ODtCWisPYhu6NU+zOXK5ynwwWgsRSOZHpVuVFNOVvPFVc1DY/ejte/uHWzeqkMB6+BfIWiaqyhw==","shasum":"a51f93f52135c98824637d3bc474d044aa2b1b33","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1500-66.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC56jYX5FqSlZ8qD+F77uDb/ZGwRTs8QozLz1PVCp5WOwIgAhlc2WUd9LgE5mYdSjYJWwEE9Flz2hxs+YNXwJIrId0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidDDhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN8RAAl97Um0MSdee3fl+SeE5SMlXtcnVtUk1npU8UaFw3hw7l67w5\r\nVygrZIL0l9WBdXbhPM6qvGrz/Pr4n8LDCSYvVp3+rLr4mpZROk/cRaTIWlfs\r\nepfsuCA12i6BENENsKytJ3RLJIgc3wpldfwK6jCIxFk71ApCfQ482/YbwA0N\r\ntn76kAojr5zWNZFbKAkCKQovxVhyl1t1wucI46gHfQi10Za3cID/QJHFnnOd\r\n0uSKgJOHDoitMThIg5P9/NYqw5aGcPVBH7vI30zCcYkhEFcrC3rgTtcgEOdu\r\nXK/AwAhHrLJQdyhCE2gZdcwt+dTdN6NlaQd0kKKXZFzIDCmetsASjjq9v8MZ\r\nXI6wx/nUfF3Ki9cng7AgzsooztDQVojIl4i6AV8WniBQvNPNcsQujj+rbXc8\r\ntz9BHqca1aL4B4ZyAcLGblcjOq5aOICgQPkywVJQGQf7FiKlUvz54uYCYAJt\r\ncA5rZnrRH2r9Sk1P6ZRTS3JvsbbTEPozn0PU6+Y4dBzBgXy1Beykqw0sqMWy\r\nCl0uPAZquoDYgFsR58Nc1u/Wa9mEcUdhVSBfRIAF6DEp0k38uC9WI/fshNPp\r\nAn/4WX9zZGSv0Vj0Z4XjfNZLOmVd7Mp56i3+el9N43TXFjXb5cGoodjfMXo/\r\neK4FqAocIdWkhlujyaNRWoRecyh6n45d/+Q=\r\n=MZ1s\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1500-66.0_1651781857462_0.3728861906178267"},"_hasShrinkwrap":false},"1.0.0-canary-1730-67.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1730-67.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1730-67.0+b1752c9","@bodiless/components":"1.0.0-canary-1730-67.0+b1752c9","@bodiless/core":"1.0.0-canary-1730-67.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1730-67.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1730-67.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-v9G3YPmmYlkF4M8lbA0LH1WuDesStCRP6PaRjCWGC6ZhRJfmemNwj1rYg77A5h1pVRd5JYUFLm+BiZ3pF/Ndfw==","shasum":"14ad822df5c27a55fe6b1768ef1efaf27573d714","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1730-67.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTtBNDRaEXkt6DzvQxGYirjCBd0CMnvkLMxMcU+7jboAiEA0A7hWF4KnIYc7aCVzijdLef65pphcHp6SbMIk8c6RWg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidSXRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCLA//Xz0CnuLKmFO5cSG1Pel4Wq6Bho7MdCMT2VaY4gyqQ2EMcZTV\r\nyk4XgRD4rcDWJSxJLdtXPDaH9L1tWXmiuKKMHt2Q9aTUrOlDkfS3Ni+O3Jnr\r\nbOttzHBE5kermTo1xtlqTFKSVH52cwn0kHW+u7dcqKx5aSRFES6EA89Y1JAE\r\nKl4DDic9QRYgWalZropl+CHe46abOVo96wojjemXFc0OpwMLTf7KJCVC2pjc\r\n39/GiJzAUKFS5joyDLd13iAXmZjnaeFQZ/bJ+Ig7X67Tou5axxoaMasEQl8G\r\n0mIGQEFrF7/g1pyDZ2Xy6cZT5SebgtUlHbOtV2FXoPu0SbXCdwg6gjV97/9R\r\nfsv3w4hoOfbzL5Snf99KdSF/k83WHGf9snkhOfOTXrriRJ0JzRzuTQBu8kUq\r\nogzVXOgGi0SINmxc3IHn79yyGOpaPzs/02gDOGEXQRyW+fRdJzh3ifFq4rqg\r\nu+wa8eOdya+Sbiza6BvFik1OnfwBeNFWF1HzC/WaZDUBrqNI2c+S5KijDWQT\r\nnTRGlJJQ7oA2MXZdzicgqAKS1hQtxaL18SEtu8bTOlPjS8gg45kGzSiZDMJi\r\nFW9488Y70pZ7Qxfnn46Vs3i5rGF++pRqKTSYWtALWRUeoKY5+ekvf2jLPBGo\r\nMS82YGgiQvN6vDtJQLBBs9ym2FDQuZQBhKY=\r\n=4+Lt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1730-67.0_1651844561043_0.8915309157866107"},"_hasShrinkwrap":false},"1.0.0-canary-1730-68.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1730-68.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1730-68.0+b1752c9","@bodiless/components":"1.0.0-canary-1730-68.0+b1752c9","@bodiless/core":"1.0.0-canary-1730-68.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1730-68.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1730-68.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-05Oal6j0CkQivVi+9ITD+22IY/3r3CZIhVoHTvieTCjeHH9iv0R2jJ5LOD6NhlY8NMZTtpsy3z+Vz6bj6A41Mg==","shasum":"f82c5d5b7bfcc8f66458ad52985e0716393e770a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1730-68.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkjejcuo8z2ptTv/YGyA6HH9HHPT99lW2vkuWMLU7eEQIgLxg1An33q0irk/i55I0//xgEYrF8Gk2ZZ6ATlbPheYs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidTIqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogFQ//ZyFSSz9lpeD7PDsHJzXAfnrNifH6LepLc7pdlSLOYeMJq4Rd\r\nbNDectjmo8tnddwqGc2eWjUGwt/H5Kz8/0dQpRSmI2OpKeKBMokub2ux2bdX\r\nfah5GU8qem7nJxuu+JC6l4j7bHt7CWAGwZpeciTtMLwZ0DFQice2a8FwFL71\r\nRHU1fLQtsEauKF517Hgp/nXVTVil5uyKp+GG15XyCF4QBYcPcydYvIFcZ3n0\r\nfIxUgBEs32EWh1MfsNo+sD0y0QiLVstPAwGDcHIb0C26zvPLujz8WnnjsINg\r\nVOcsjblOMo8LH+GWxgyNi5zZ+tN4kA+D2SYnautDTvQ+cR0KljTCtiHoigO0\r\nDfixS/6bwUXrJ+oPzfC8mjgSOLiGQHcZYzIrIap7ohw7HicRFcKFTXHCPhmO\r\nFRO1RyNImD+mfN2dCnoX+74vFCuAqpIGIJiLhxNYaw6RpYMPgXxiyVP0iRLg\r\n97JOMyY5dsL2rstzOMBxPCp7qczsCHTS0uQtau9wx0ftnOfKQygnOeKHtb1L\r\nGO/ltnBVMSbQxqrf5WWRWnjnmcfk8p/DFL4kOnCjtIHUu2WWTZqVFioVgl9i\r\ntKj7HAnSfsvieERAIjGSJURRguNowRcZ2ATuOdV/+4MoIgEM2Mz4aqbycQ0d\r\n3zIhzzKHSG7pByHboXjXYAGgP99jF4TPTnQ=\r\n=yHe8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1730-68.0_1651847722468_0.4107562469790442"},"_hasShrinkwrap":false},"1.0.0-canary-1635-69.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1635-69.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1635-69.0+b1752c9","@bodiless/components":"1.0.0-canary-1635-69.0+b1752c9","@bodiless/core":"1.0.0-canary-1635-69.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1635-69.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1635-69.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4PDjLGzofWA1bSEawAwwI9dH9RP4y7NycQp+qpTelWDIZJKZ6Odr7L8ma4oBhVqDC25m8rv+aLZJ4dJw9gwqMA==","shasum":"c8d05a3b954ed3e4c8d7bf71f31264c239b3458f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1635-69.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFd1LsWxA/JELnInHHrAckC5wmKEAxiNo3CuypUmWPgKAiARAsiJl3lb8/nBUTZcIdBy5KEMpc/HLO3PeMKNmBC0Nw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidUPcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFrxAAgkq9mX3jjUWYQtyh50WF2V6mOIn0vguxi1xp1oRxp9DUuHrG\r\nE8bTCMQfP9hvnyRUK5cdr5KKmd8la3OEyuvAN77PVrda+ikcaILYgNrvqny9\r\nVM+BqDRqjORL9tvtRXSHR1oZ29IWzdeRsnX5m2zC5MiQXNIY7tFcwf94oIrA\r\n9tFrpOozxgPZGWgHhyAp9XDrveXFpDSnalbz3lYxyNm9+y2SJ3o4fdgnUn4z\r\n97U1P0bGjTLQsWl9LQ3CsHA1o4xc4XiFwPyJjkA8/hRjzhBmE5YKW6PVUsQv\r\nhXYzvqx6K1+Dh+LMy9JOGBbTdMpt88MTFI4ZsaJhiqU2QaGvmqgXhupWnqqL\r\nT4S4IfQD8rBZ1p7KHsjJmCpiJQ2bWOQ8WE+Q9dvaOHowuwVMXME0riOFBfFr\r\nye8kzCUG9tI6A03SDlxZseqIbPWZvIu8KNvYpomCBaNeEhevmfVpSdQtP6De\r\nbK2qR7+AHGiv+vgseUM2r9BYC8NzPz1WePkXvgi1FrcDTem36Cy0KsnBSwO5\r\ng6iQcUCRXYAZjpwQs4kp6MJORj43uzi4xdi8S8x+ZLzKYRNk34vfB+2KsZwm\r\ngWio5qYzLppAzW8Ro3mhhEsE6LsU4cM8JgPIUaC8d1stnAZxVNWsyeRpLJsm\r\nFlxULbPu7aC589r5/J0D61gWmF5Y6dFC7lg=\r\n=rpVX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1635-69.0_1651852252686_0.7278105692866028"},"_hasShrinkwrap":false},"1.0.0-canary-1731-70.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1731-70.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1731-70.0+b1752c9","@bodiless/components":"1.0.0-canary-1731-70.0+b1752c9","@bodiless/core":"1.0.0-canary-1731-70.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1731-70.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1731-70.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-5aNN0FlK3k9JBsPb1M1Ibw6CBg8w/3+piCG6wnbXw72CjbiPJdphDkaU4PPXBprw2yZTjBoqeHq8ee07KH3d2Q==","shasum":"40dc9849edb92b0004b77021116d8d1daa8869fd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1731-70.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtYMIEcZ7nbtldeN1/ufEiSJrakgKwOh5wtcuEnlrAnwIgNsSQUzErEhd0hijPa7PUnGYcSHMm89KeerSs954TS+I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidUpNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJ9hAAjWYGgho1lZ3Cymm0FVQ8uXMY6/Fy7hZUinxfrxSTeE4ci+Lw\r\nxWnKJE2XsWHvA9FW3ZF6LTwKAWzMUFDkY1QBeCxleXFoTl+hWyh0up/UmTCu\r\nrgHBUZOjewtpoijMcAndQWRTBFWtUUcOqAeeQ9SAbaTd/misIutPMUB6uL5c\r\n/jSMo+iiVeV3uDL4N5CJjy/T3rCw4PCdvXCHqafqRDW1b0dn/U6U/srSWoL4\r\nk2+RzG2zF/lw7qrrFXeYN2KJqobuQ0kUAg3ykcx53Qlqg16lRjulkHkABMuY\r\nqTkABkYN1HB5dndVgtm41eQZuvGSKIesLBP8yFFL8M32wMUAShKduuP2rW8R\r\nE+HX1V4T7mYao/WL2iJ1JFhre3UL56BaeEA5wjFgUooecfFcKc9XCv14erN/\r\nq3YYJ5nC7+IxlIr8s6Uqh2Is3gZJGH9MGoFdrJk/zEeMVnkBNyutuNoHliUS\r\nd7dgyLhh3PpqS/Rm+llNWyQiYtRJlsXXkVxMQSlybVTfD6gSGN9lNuiK2S0c\r\nFfETIxOESZgxgzEu1xWaxO2DNgROM8g79VqiGokb+huhxhVebO29jTw6/nkS\r\n3X/mPpHwbNidu1lnSU1yjHQNwG4EIXvBZyE24vFlXP51LIzoyhP+iEM89vra\r\nsh70OtctsmLcEmsVT/4VV44ppK2pE5NH78s=\r\n=Cq03\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1731-70.0_1651853901509_0.7790616428843966"},"_hasShrinkwrap":false},"1.0.0-canary-1733-71.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1733-71.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1733-71.0+b1752c9","@bodiless/components":"1.0.0-canary-1733-71.0+b1752c9","@bodiless/core":"1.0.0-canary-1733-71.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1733-71.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1733-71.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-I0Ro2Nxro+SrsRBdOyH2SU76jXJJgpturpODSaf7VncJJIpiRJ6XysKDOqzICylNU/yVyh5022xIZw0H/A3Ndw==","shasum":"09e41c9052e9770117d7f1694ff5538c8819c3a7","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1733-71.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNVxNEJHZVKpTWNy35aaz7C1rEFsBCXLDSWHmVVoKiuQIhAJdyB76GE53cSe9XNpDwAr7rVCFXx+Vyk43P9jtehXAv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidr8zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVsQ/+PQwVtSth4JkPLb/mTo+9KFrIAjHfL6m1DmMxHx+ZeawCnCWn\r\nyQ5hXfC72sqqjQF5V6xFE7I8trli2HeCHMoYLFPR9eNhorvGFPu4T85r+vk2\r\nv81kf7Q6ZvBdBWGbpElrL882JBcR0z62jlHrdafHG88O0Vjab+TMCDWp6lpL\r\nIlvp5dAzsNm1pwzTeOuooU8dJpdSR5CXNLHUYOp6VXWxZoWiT5snu5CLYOrn\r\nPuXFbiBx80A0BJJkYvP0Di0aPsnk+zMGirZqtYzmWdEBZEV5sShvFGum0Z4u\r\n5yG8a9g9hAs3u11Uej5jGfgqNyhnxsOnf+V3X2bjjuTblEN34Cfn+XxOwNUv\r\np+mauGG+NLKq/HwpVIXokkpscjBEMWAW+wbrZSZpgDIsyyUqnTydN0yH0Y+k\r\n2e04LnvMtszphINllrZRgbZ/oK5E7zdIyd/G1bH5qhSVRfHTgyl6k55v3kBL\r\nWxD4EDeZEg2yzc6ythKwjIxivkgT1douBgwYpMDzfVwcbsZUfu2XvdDxPmAt\r\nEYSJ0ajGG8u8StEFJ4MuSKHfI0B3/Wj37bSEI4Aq5+p1muKQLO2ZMt68COaa\r\n7zEvwbHUNtNzabrPY6D3cwnSYIF8K9qIo+7LGqq9bbYl4yPWlqk6wVKs3PKe\r\n/OgbfPdN3XT0NX/ut2HfX6OgCBCUoK4/wbU=\r\n=Wnm/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1733-71.0_1651949363420_0.9244752857075542"},"_hasShrinkwrap":false},"1.0.0-canary-1628-72.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-72.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-72.0+b1752c9","@bodiless/components":"1.0.0-canary-1628-72.0+b1752c9","@bodiless/core":"1.0.0-canary-1628-72.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1628-72.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-72.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-I2m7KX2VrPG4lwF9uLNM3y3dB29UukIxzmddWOjbhlIMDY+8ttDFT7jbWzm3upebUB98cKYqg0/xC3kiUYtFhA==","shasum":"c78dc4f193d3c370f6bcbd7c2a5f6877b36f0e1f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-72.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE1YYIQaruJE99ViPtEqIvSq605EoBP9mODFUnR9HdnVAiAYnxD08m4YtVH2NMUPeo+YaOvq/A+Y++MxhAWESVxrGg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieRR3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr25g//d9QQTxt3AzQ3wyCMVeuLQJ0CByIlFOT7NzSMpzA15vrz+8/X\r\nh73Odyf0w0C4UJsifXBpy4+qJKyJd/A++yv+8BEA5D4sdXxQ/d4RuBtO//q6\r\nuxIn+rDZrzYjP9uuCBwOz6ZVi3YyFbpIF68HvVa3FKJOoY7jQbgdVthMud9p\r\nmEL6Ev5t5qaQzumOguSfen4DKKCJBEcEXvh3aCNKJ3lBprISWO6gx+TKjlnm\r\nqhA4/ZwoIK/ZQCuBsPWdVcG4eYhxBFl6zRdtJKsbfPwpuYJh5fmUqsXoIhnn\r\nvA9KNs8z+2LUK+2JAsXAt606rdcIFbeAJeFas1Y0E6fqDPGf7UokFGQKwwae\r\nl1X97MfGG+BgP3w6y5ZqaXe/pU5CgDnLhWGJbzs2u7YdNhpkipmOftMLec2Z\r\n+ImPcGKhopVVTqZfrfZofjmXZVJaQbf6mn3fpgA2dCQJQ3Zbehf8dZvvD+AS\r\nA94WOjRbKUKWLWl3szSfrmJ2V4ZBszedf9p1oC2TBhact8sj8UNzDhGVmewh\r\n021c5clfPiHLzowQ8HD+eowIHgUCYb/6HcKVTvkfgKrB/TXXHZ2RaRUhB39C\r\nkEYaaifbJGGf0PDqx+M71HqdQM6fshdd9FRvlwL/rYdf8ITRJZ2051uRPk6r\r\neSSb+9kea2i7KALAsPz7BTe6Y6UbiuVKD54=\r\n=uYt0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-72.0_1652102263310_0.8647307177436165"},"_hasShrinkwrap":false},"1.0.0-canary-1595-73.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1595-73.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1595-73.0+b1752c9","@bodiless/components":"1.0.0-canary-1595-73.0+b1752c9","@bodiless/core":"1.0.0-canary-1595-73.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1595-73.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1595-73.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-0qUFEhbC2TkXOeQ8vxICK4WJSwflUGgH92vdmBK5wXI1ObeyT18WkPNWLouGhClpRn/xe7dXCABaSSJkzyx0xQ==","shasum":"4ef87fc19f88d7f39e6041e079fbe607267fdf1d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1595-73.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1Ox9Ea7ib6WHtbZ+/9WvxIM+iNsiuDDN9XI8gS+clUAiEAh9XKOKLOfw//TSsKPo14BnB4+Fv+L1xv8HX68Y1fFrI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieRbNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE/A/+MlMcYSfL1Pp7c59fZxAmAebYiinj66uXSrmrYJ8lJApEkA0d\r\n7BLFWxa4RsHh9Ncuxn3XWBU6o451r1tTFsrzVO8llrbQJ1y2WUU3sPxOgbal\r\nOQVD7hg6mkD9puK1SH7mxMADqXswlHtc3uCqnhRAb7Gs1v2QaK0vNfdk8X7y\r\n5ux+dwuFxahRnl6UjgoIb9ltxtQrOMDQsPGJNyY6allK207ypKDLQQI3tYPV\r\n2lLwnjzPF24WQdNXxbGxlE4R/iOx/HzqBQZb8fmMiaMssnPyZF5wPonHVjyx\r\nUY0UmHNNbtaL8l6/RbiZyAMXyIVS7n5psEEiVrQDtCAKE5fjv+56oYxmEjb8\r\nasEdiyVTVyKha+Z0efH9SCmPziHuJBRVWBuSrTZWsziIly6HqRz7t0mQnde5\r\nYdWotQU/fl4XlHAb5HgYXI77+1SDZ/ncZElcwskULyT93VNPthPU/tG1a8sd\r\nQeh59Me8EoceS8cTgghx8zuEu3UM4jlJXmMDPi8Pm6QtrapIE21HnHfmQgMm\r\n98OO24s8lvDYevjqm8c3lQTGqqMtsHeLeydy0EuMAEZWkq3DLnmo4zL0MRs4\r\nkNGhdSi7+fHmcHvo4ePPmwU4qJd/E5Qy9hSJ4Tj+uXnZ50CuTFaoLL5SJCSc\r\nW9kNUpR5bNsyVpJX6kkYy7B0VAFwkYiLNGQ=\r\n=YS1q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1595-73.0_1652102860917_0.5231021541253429"},"_hasShrinkwrap":false},"1.0.0-canary-1683-74.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1683-74.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1683-74.0+b1752c9","@bodiless/components":"1.0.0-canary-1683-74.0+b1752c9","@bodiless/core":"1.0.0-canary-1683-74.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1683-74.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1683-74.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-8yrV3KvMtsL2/sFAzhM/Qk6dvlUi9QYeXlP5vtGCOd0H82W+ZM3rrn+6KYAeqtKYJGPFgOIfBpMK/c6NWtQj2w==","shasum":"cc08adc91f32a45bf2c016c518fba87840697eb6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1683-74.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChjrid3LUADegyLYUlPixhtVwLA+SoiTDwdAUItHn/dQIgLuzKPbVZzADRJPhwzDpdtSEexF/V2oOgT2TjTw62nF0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieSJMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2MQ//aub7MtAW3yyqQ8bWVpWYS0nrw0RPEqfxPthMf0q40rUdq8J4\r\n2mikfCot+r1ZColbGqe2wvsSoakp4V7sVDvxAV2q1Jz6moP26PSgSTL6RFgK\r\n98rXx+Tg2UuhmnuWn0HxelLVsud9qjE71iwFBkQpombYXsufVzCiepsDolq6\r\n5PQsCRV4ipKBbEkSEnS+OIO6dR7N36ZnPA+GOznG8X9y3D5gngMFXKE5HcPF\r\nN9B66vH5sp4OlYduvisU1DemXOneLiTqnkSsR+Mt8aTdtDmH1knFJxLQ3B3D\r\nA7Awt/ubsS0KeR4NtHFT+FFoqUPr56RyhQWJYjqensboUBJMYC1Zh5iDfZ50\r\nkwWYxSh4g0QY/OFCh5zwCZm++x/ol5ZAVXLSGKz6xNVsVmTeAu2TYM7f2iQy\r\nnDw7eDqCq7Z/OkNSG/J4WHYO1Ttlkb8+djqNFpZQIQqLGImiRjFNfGfb3rPf\r\nAhAJwt7+tsARFjjXIbjlstxZE9dBLYqLq1H31edNqShR4FLL2bPAa5t7XJH4\r\nQPRD6Urq3zOvBQ2pu2VLAz8UpUGOFbD8iAJFhN2UZgF7xUQzppLNqdv7rQlT\r\nn55qd1nUQff3PvYiPk4DdYk3aRLMSR2qpJyA751pZZPwSdLuTP6GSsc9hGVn\r\nH+tzE+00+tVjuk/OKt1aNAbWbpRtEGO0q50=\r\n=EEtv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1683-74.0_1652105804068_0.5523193545888292"},"_hasShrinkwrap":false},"1.0.0-canary-1734-75.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1734-75.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1734-75.0+b1752c9","@bodiless/components":"1.0.0-canary-1734-75.0+b1752c9","@bodiless/core":"1.0.0-canary-1734-75.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1734-75.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1734-75.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-CzDSx7xU4mdThEJt3Sdqe3bx24KEMgXHgVb7Gao6oQD+XMEJx+gnTPvm9Ef5dd+Q6u89yPd/+cvmBUqK7hVdTw==","shasum":"6a8522debb8095c6c98a9782171189c3cfc590fa","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1734-75.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4xPBTRhjBLQTs2mtRCf3bzJOoPRnnpsw18KwmTiNwlQIhAL3fvSXmBEve/dmZyZ6NAF4VpXR74NrQ+QiHHecIbH+o"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieSNkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZeRAAlJ4/qLTIgs1Iaw1bqJwIuVvrU7tQ4SL8Th881wta7SeThpqb\r\nCLZQp3s7ie/+puK8r8nzSbFolUS2r3m9XKKjMZGuut4VPUbGkZH0z5tFlMew\r\nf/f2DD5O9bnRxgJsHKF39b8/SDHpDrcl4BiwvCIM/BpSZSExZyJihzqx0r9+\r\nRNDLaR4iY7rYOxMd1wHnbhfyKDqRJEiPQCn5+BRNejMlY2FBfM0N8ZdO4tQ6\r\nODlLwD/MRmZrD4Gn1fu1PrXIyHNt3+QzG8xzU1KxNhoxl8H4nF0GJ6OKb0t2\r\nGGV4AtXVW62qjzbNrlrVGJDtSmrcbGKtZdkDL0CixnxwBtN36kKEG8P9X0hv\r\nTCgiXE4Xz9+UtqR8LZlRsuh483M+k/1a9Zh0BOyhUHboWcrOSxgCA2wGWY5m\r\npZ6k9XdRWUDnZSvYFqlpqDRA2h3FCeorhbjR3xeDoAarooGtZK3RWz9sLadm\r\ncrBPUgcKjmyE55Sx156PFEYIz7SJofRq4WTB0B1Ofv/UwHmTQsTZLdM+liiB\r\nI8R5J1pFGgtOVAx61F6PrKqG0vIZInpwd6LMaHOCNjPEC8lU2cAtOmmT0s4o\r\nahWiPQ5u8tzJkEvdSUp4+4Xxi8nLYuOl4GuFP9foC5UZBexGmP4ib3UMf5SJ\r\nkBFXbXyYvaTov8eHim7DozIXA+cDfAEEQ88=\r\n=5oHp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1734-75.0_1652106084111_0.5648142827192342"},"_hasShrinkwrap":false},"1.0.0-canary-1735-77.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1735-77.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1735-77.0+b1752c9","@bodiless/components":"1.0.0-canary-1735-77.0+b1752c9","@bodiless/core":"1.0.0-canary-1735-77.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1735-77.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1735-77.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-tYYM93lM2IoHoj7U4zJ57nAUXAawpHxZ1bPvwYMcEes/43xydmdpHZ1teU7XxArXeIkt5yORd5/ZB3por952fw==","shasum":"1bae00f730120275d438868a53faabda9dc95e0a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1735-77.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBopSA9dC++JE39MiSIZh8qvPPYZXXTvRbRtdtNoE7quAiBnzIK6SZ6qieilhdpJwVPkUZEaKrsr1J3roBw/wsmmag=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTFkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7ZA//TSUHKlW2JTa1dhybF4PmNh5stAYGvcqjaaecz2Wu6Ewdrugr\r\nHo28Mnz/ofSwcEzt6O570m8eMSxh0MNk0HRblGbuAFMVT7NkTX/X/qbohpHP\r\nO5dPCjXIUvNTbklPf6QZOqaVsCj7MVNJfqScO5RMwtcUORj1/Iz1Z4symGcU\r\nCF7FgFOkREGjXsl1emqlAJ9WAF2hDq/jq6Ba5QgtkxymtkY3wTX90CFwHY+H\r\nme13slfGAquLteJWfMJnKAwOf4gClIYAM9drEk6tc4r4Ad5woIfZNuzZkNoW\r\nGXA4MK9qmk7VxduI+B6JcjmUxwO/gPt+TvUfTJ0DN/hhGXQbyOmWvnqmpDzf\r\nJKC1FFZDDoeHOek7O9X2UomUPYCSFEy8B4b4DKTxHPMFKPJcAsvSoCVt41o9\r\nUOg0kfmUlTQlle47i3qmzm5oSRdI/Zan32T3TNAQS+lVrBRM0Z6/85JuFISL\r\ntmt6dKjgFdSwkpcWHTVuwRsYjr0SSEoywumoZWSs4Qjjq3XmtWS5iGcIQ4GT\r\nC+nEmndtdmCmrYZnuuqkxi/+M7J1nSlLsALP1Q6GpGiQpLejwpdILSSZDUmP\r\n0Kmdgqo02oUVveS+R4Sus4wEyIXWHfzPDIspCZ0emTxb7+HOWO4+Y78ueDhN\r\neNeSNTVZPH2b+yvVZmYk9ePqOiEno0JifNU=\r\n=SKV6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1735-77.0_1652109668070_0.039499767239042916"},"_hasShrinkwrap":false},"1.0.0-canary-1735-78.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1735-78.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1735-78.0+b1752c9","@bodiless/components":"1.0.0-canary-1735-78.0+b1752c9","@bodiless/core":"1.0.0-canary-1735-78.0+b1752c9","@bodiless/fclasses":"1.0.0-canary-1735-78.0+b1752c9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1752c9a368a742c683bc663c8253e91acda7acc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1735-78.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-8zfY0ru248ngL0e8KOD0viCbgYe7G4HlGZSNHloUFCqPKYW8ZIVG4Wod5oyhYAPlmKUfuzae8N/3o17f4XzzYw==","shasum":"639eb5247554e76b08b7c279187246dad606549d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1735-78.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICmjvACx3/N0qYWmmhgIwM9MBDzRcTQSwmX2se6p7xzzAiEA7LlKngMLHMrl08azeNqA0h4EJLCKLJ7udhwF+c1Ocfo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieVErACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBFA/+Ll1sOTBhYXloQa0ChrngUAZrnBeqRqakbJMopEeRyvRdJRoE\r\n1TPoG/KBwWXKaLL+A3AtU8NXADZHo1PG3Uhyj5K38RXw8UaedTOlKLdKiEgs\r\nlJsufj4KEoL9OsBxdLDG/2joUkGOlJi1T9M33ahaSxcrW/tP/UzjC7c0S4A0\r\nUFEnAj+X85grN2O++GNggodGbLG0KXv02MTYJ/3JFO+gC/9WysYu+UDY7tH4\r\nH8LGs/Tb/1tnitzLj8qivCwLgoGVZrnX+3tAN4EHYgn5iORbKZj8hJpD0yR4\r\nUFxgOqhWLHGmMKCD1GxGoG33mbXBhp8fuQE4KIKUuKrW1lO2qCYF+8WNt9GR\r\nOo3RoyiI7PUVTZyE+pAwAtXPBc77Yb4sMbrdIcfzmMfToIhHH8POW5HK9hom\r\nhQ/ryLChC+B+Yu5wiUk7+Zfr4ITr5u+6DfxF4W/8YS1IjeFKcENIDRhOyNlt\r\nUYUFVKkinYFrd+RKB5/oKXat2roYCAxqmdGc7+SJ8eTGxum3V25QYSV5JECH\r\nY7K2lKMz8LdiNhsGUFiZNUNKm4h/FwuTJX2+kc9rafnApgFcilWWWvTHvxbx\r\n4LHC8o8aLgHzA5ryZsBsghy5e+8p+8efZuqsDFFmvNkh5Yvl330ToKEDQ4/Y\r\njUaInmdghRD0eGxkjVs6pUHye7zH421xVzY=\r\n=QT7K\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1735-78.0_1652117803112_0.7818616692745353"},"_hasShrinkwrap":false},"1.0.0-canary-1500-79.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1500-79.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1500-79.0+0c9e0a4","@bodiless/components":"1.0.0-canary-1500-79.0+0c9e0a4","@bodiless/core":"1.0.0-canary-1500-79.0+0c9e0a4","@bodiless/fclasses":"1.0.0-canary-1500-79.0+0c9e0a4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0c9e0a44a4ee8fc6dca8edfc5a4c49a524a1d681","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1500-79.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-bKaGaE2OmFpZyQhgB9VdFidtnZkknad7D4QHK3sNKlmjO8E3EOSXuco0mGL0U1xgj8fsxNbARIHwYHep3GRUuQ==","shasum":"d44a1141867aae1e97fbd46e631099258e07747b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1500-79.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF4BtGnvCJ8RyU41PV7gL6fA6Sdo+N+R6C4atDHCVhthAiAgsyzS3wyRmrDOpXFl+/3QO6jcrhDEQ2tyTzyO32K54Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieWAkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1OxAAgjhdKJbkxpLnY7OKKJZqOqNqAsjHjtDASAr58HpFSODb+Pcv\r\noCfgVhEvoAYjm+q0rM93yotF59swGjozerjv1ksQuZUBuEwJZhkHEZlkhsaU\r\n2wLLWnv7Z+NwfbRvQODIsP4W3krmvV9QeYYE+iDbw8s+EFw63idW2L8iaB9v\r\nyjPz7JeWs816IRmzN6OAri1DlCuOA4azNzchqW5obCpfwtQGDdFnOnaAD/oR\r\njeaqKGwb70E9Fx9DkDCFtVcTKUgtupMugt5mPdf0V7K6fpaH8L3T9AEzTpeM\r\n8Qzk8WVNzEan/+OGBALufgloSgKqh6UJZRA3MYr10BvoUG/wk8O9t+HF0n/A\r\nPRTgGxOnMM75+yxzThoUr0GVgtQb5+XPMIOST6MAI3lP5ctz3uIO2ih073Km\r\n30KzORfREImHAdx99LodubQClG9sc2xZ2yWFsIU7/O8t6jhTRwEYS+6d4d2n\r\n1VGkyjmBFaSxgK2dRVCvOyACMC9nbxWjLMgS8xwkJAkE8Tk/+T0aB70oA8mz\r\nNbzqDV+Zk0e3+dbkA33b0pUXgbe8W7JAsMaITAlU5+m5TcYUq3VLL6CHPGbM\r\nm5bDy7bmTtipAlPHCvqRAv87I6Eqhi/ykGReF+AN17SzHnECCUGE5wjAOCaD\r\n4mpLX8i3dk1yB19NR8s6hNhDB5GMgE04Oo0=\r\n=HiZe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1500-79.0_1652121635759_0.6452178381149971"},"_hasShrinkwrap":false},"1.0.0-canary-1733-80.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1733-80.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1733-80.0+0c9e0a4","@bodiless/components":"1.0.0-canary-1733-80.0+0c9e0a4","@bodiless/core":"1.0.0-canary-1733-80.0+0c9e0a4","@bodiless/fclasses":"1.0.0-canary-1733-80.0+0c9e0a4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0c9e0a44a4ee8fc6dca8edfc5a4c49a524a1d681","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1733-80.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-eBn07cYENqTCj9htD5DtcMhQ1yFAEoqgdVPPwj1isQHQOnlsET7oWQPWjgwYoy4s8KmJIQgo4cPiOYDbUBTyrA==","shasum":"90032998945a45960e55c0511e86f07c56b66f8c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1733-80.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAfMCBRoGkCEn1x7jLsxhLWCqh3W9q7a5LJ2szUezNqPAiEAnLuQqcWqg14QFXpFVQPVNj0uKzrBHrA+oEgqfkuvKII="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieWWTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr32g//TJfqfybJc7zQ/9AxFGIGxdn+UL3d7r5ESgnXDGklr72ic5nm\r\nGZFrmQVoU/mgm6F+iH5V4Rf5lXF9hfZMJ30KP3xFc88sByqDL+EPao/GFx7U\r\nVN280w0mMJv63GfKtyohKoP+9jOa9VMaNdtrQlxd2nqQhmsCCZwsnU5adCxi\r\nNlm4JPD1CXQ0J96d21398x+uheYHrYWiw82zEyKXxiXqCX62vDStEqzvnnla\r\nU55BIEQ7U+7ALh/bnQYnyzDi4VoZjS4FUJssbB3ZtyVxb1D6cFPaz20S8f7l\r\nzkXXgmz0lbhbReb4KI4UunIJ8e2+uFKT7b+VhM6l5lBb4JcoMQOv4Pr4Q+rm\r\ntXQJPmDaeMaq2lH32/3An6uniUXVTKKut7jjsfaocIIxNj0rhzDhbqoInva7\r\nCKBalQsMLW4ukHlmv9iQaDK55Zoa1+oHjpQy9c16l/q6Akp6WXmSoqrIbsaV\r\nI0MCMboFSZn8OYYh0WR/iYuatF1FyK7wZJz0Qx1o1ZHlIZxtsnbOEUL80bhJ\r\nvNFueKbuxqn+xJpIstPwDNASx6E28jLco1U6OKk6peDe+V41xAPcaw9514OI\r\n47XUSapVF3J3lIEwNCyyqgLmJmcsb9+clOGVwlFXASMN+/Wg4boak3ZNsblX\r\nwqjb7OlQFaLH9M2MUK/+Rj5N9/Jp5lRpBDE=\r\n=zlW4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1733-80.0_1652123027021_0.030528663157578295"},"_hasShrinkwrap":false},"1.0.0-canary-1595-81.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1595-81.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1595-81.0+0c9e0a4","@bodiless/components":"1.0.0-canary-1595-81.0+0c9e0a4","@bodiless/core":"1.0.0-canary-1595-81.0+0c9e0a4","@bodiless/fclasses":"1.0.0-canary-1595-81.0+0c9e0a4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0c9e0a44a4ee8fc6dca8edfc5a4c49a524a1d681","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1595-81.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pX4DOwR8bV5tFdZvJpHrbq/D/5u84hlcoIBqs5pS8OH2HXyMkL+c1jv+x0HjI/x1qil5A9+fS9s81xGIf7/MiA==","shasum":"f912f2e05cb1fa1036bf7e2c952ceabe0092b0ff","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1595-81.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPViehWQMR7BuIy2Goclq2CVJoobL13nWBpJbRwMS0cwIhAIKe6IMtrDYa8qR2CgGYcv9EwUqkPR5p02rGrZWBtIV7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiehHfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcGQ//eqh8ryIwvSrKHdNhuG3BPjMo0bs73/6MAfcAaMspJecfNpNW\r\nmcaChijMtR6NVb7h03KxeRhyPtsXz5XAjUVJJ7gCDV50ESEWM6xE9Qn6gDzc\r\ntJBbckkC3+9b6IAEkjo2m9ieRdIyeFY/SKv0OUmMk/O+6m7iItThNDzQ9fSv\r\nWesrQejYHptoW69vRCSjYF8aG8w8UJ3kM4zt7vcf4duhVH1vR3v+y7x4KVIn\r\ndN8jLQc1guphUTtNAukL4PNFF/DmqedSZmfPJsOZ/GFJgzqflfS+9a54he8q\r\nxWcMzo1n0lxMKxU5oGQi1gyQ+C6lIIugYiYjnQE4xq5+VhcURXEiHHNxtf4i\r\nzryUuvK3wOQsOdyKvX7BsHXw0rW7WA4THrlQJmb7dQEd498DQNmTOKVw5o4A\r\nddg+H0ik8T9RQ5e8yFqy1YbWBcFpdEco+gT/ob9ohrdrK+3Hfw5lGDT4KjlQ\r\n49F98YkvI8s/987IZQ6uEBk08Yjytp2j0JkROOPZghwlP11BSwboZFpnTDS6\r\n8LFGHFctrLuCSNvpz7xPxKX43gaXQ9zHsRMoTj0N/tdcfAVL3VlId7iibWFX\r\n0CvwcJbTLw86Nh7k48uX+ZllVN68WaFFLNGvNQ2jZtrAafsvsl/WIUU5CEbY\r\n4knhjtIEhqyMq7Pa/4Phqh+VwGG6W41Shog=\r\n=ku3+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1595-81.0_1652167135078_0.898367002404747"},"_hasShrinkwrap":false},"1.0.0-canary-1595-82.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1595-82.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1595-82.0+0c9e0a4","@bodiless/components":"1.0.0-canary-1595-82.0+0c9e0a4","@bodiless/core":"1.0.0-canary-1595-82.0+0c9e0a4","@bodiless/fclasses":"1.0.0-canary-1595-82.0+0c9e0a4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0c9e0a44a4ee8fc6dca8edfc5a4c49a524a1d681","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1595-82.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-SuRik0Tq+FyRXgPUctZEBN7ueM0YTcJQg5MjsiDrgNgoGgVFuQLwdqFEsV4mqearl0t4mH2PTCuYXXqjZu/tRw==","shasum":"b0b23f35db5db3902cc6de23221ffef512e37b68","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1595-82.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvyZYT5eQjLt4EO6SRwCf6rRD16vfPGUYmfoBZFYuanAiBRncPR04YSdRgP95TXlwKMIrgPkKe5yhCydsuC6TpE1Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiehOTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDtw//etqnpNX8sCxAixIeNeIgXNQL67yfKbXdHl3+xkxoAT7d5+qV\r\nVROkyVo2OKvWQltbtGG5SfK5I6we9aa3u0Sojn3U5HQF3dLLC1DS53eDj8VL\r\nOr63CnA6OL7dmPuTlPMfBYXoXx7KCOF8gtKePmvIQSesi68miflZwbsOe+7o\r\nT1WvBpgMeK2DQqxEPWbouYmU9TCKzgfw48zAt0oDcD9qcDj4/s13J0DbzR4N\r\naqPh73mAFl+v3ijmDgYAq2uWwX4ItB+6aks/6bI/45naDCcf65ep9GCW5vMW\r\ntx/KL1g4Ekqm+Av6u8Yvaz9VGPCVUY3EC+KXjkdPPNjimvSWWKlEH6UPf6uO\r\nAKaMZKarIbgl3MmCdiAc51KlufpEJyj0QDvxszkh8yuzFz9F4uO7lthdL/OW\r\nZSuev9swuLl2zQs0IKNResjUmWnc5nApb0gVWeCeB9vpOlnb7+GbPc23mqvq\r\nuz8mGI5Q2YJkUxpFowPiIEtJPDsIP2RoAhD97vT3haGCiAzvhYcG8NB12Ud8\r\n7c88dLhsCN3sxdmk/quglfWGbEcjkmg5UT0/1ZnW5s2PyypmLZQz/NVlMDSO\r\nw19ekKMe6sh5sizfcRtreHSfwCouvX5O3Yb2V/p0RglVGmP4DfKwai4iRefz\r\nVIuWvXuFN6iDGN0Ge8wgtdt/G44nVgEZlIA=\r\n=3XnU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1595-82.0_1652167570783_0.10928858040984712"},"_hasShrinkwrap":false},"1.0.0-canary-1734-83.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1734-83.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1734-83.0+0c9e0a4","@bodiless/components":"1.0.0-canary-1734-83.0+0c9e0a4","@bodiless/core":"1.0.0-canary-1734-83.0+0c9e0a4","@bodiless/fclasses":"1.0.0-canary-1734-83.0+0c9e0a4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0c9e0a44a4ee8fc6dca8edfc5a4c49a524a1d681","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1734-83.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-YBcqezLNuQ/ePVuEO3s0iaK6bdKaZ+H9Bt2x0aRsTFDcaeUu6AERWb8+kfYuQhApqRx2DQvY/pHVuGoI4xwzFw==","shasum":"ca97c6f61ecc130271033f49a857da21871ec5d8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1734-83.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH0zjk6jSL9i3ah86bw++AmyUU6FEaYvir5irDlGSrivAiB0idvl0PxPqaTR+HPtljqtDkyQLitQm6QMafI+n6mlww=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieh+jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmUg/5ARVfQYPBaA40hduG2TZokULgy8kuBcMOO3l9Tm7k1bm3oma+\r\ny551N/P0N3XsgI1h0jGfJabsWQl1nfm/2K4DWMrT5B7ORFQ/deXQglICVQq0\r\n/BjWsqNj9X7QK04qZz+eWSakovHIS1lYeu3qQpBK2jSey4H8fisTIszJBe3h\r\ntt8ShQ5m6nPVBkBlIKVNfaHj9qQorbcGjmk0FOzOu53hJ4Ys5GiNuubtzkSi\r\n2mATmHC2XQpuXwnOV8myJXNPK4d4y3gJosn4vBGLkVvITNpwV2A7Z5OBiviW\r\np6FVcsg8xBWE8+0c0JgtG/Yz/my+lBEoG/RtGHvvvqrJDUmqc1FFmg0d0oUO\r\nuuQk+dECPanOZqsQZaNffAXa3v8GeQE+/ZahwEJNEMrz7ZeWd5xI8OGX4Bpy\r\nyfcDD18iGSW/lo4lk4uEq775VOTAveorTbixPu/2nsrvdMZykuh+aLrdRj2q\r\nfeoAPMGPuAgLrgMuProTrfvA+KMgtm6J8g3wCFV8my+7pvPZTrWxkah7Encz\r\nU8JxGNfNERY2p1m6QHpeDK9ufTGKRH+v1xZvlRTVN6Kdjg2daT/hRbWLpjoF\r\nbUWymdwKwPh9cpq+JX4dUsqu9Mn3j0xzga6UmXQpZ3xznaTBdJX8knKRIFGW\r\nSNWbe03h8pAHEV/l4BvbWcohQtgzFXyAlVI=\r\n=Hgpx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1734-83.0_1652170659623_0.5574166601907433"},"_hasShrinkwrap":false},"1.0.0-canary-1771-84.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1771-84.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1771-84.0+657d4da","@bodiless/components":"1.0.0-canary-1771-84.0+657d4da","@bodiless/core":"1.0.0-canary-1771-84.0+657d4da","@bodiless/fclasses":"1.0.0-canary-1771-84.0+657d4da","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"657d4da46f5e2f986257e18ee6b61f75605f0d04","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1771-84.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-PHFKL8NYppkhhPGEvX4DP/i07bQ4HxniBxxLaY7Indnro7zEd0W7rIC4SXfmaYmEi+FY/nP/fQ7yl4RLui+U+g==","shasum":"01e258fdbfe891f84eb6334fdb84f98b06be2868","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1771-84.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4abQkE0CckvOZnb7YJtBPPk5OhMWKRnErUkiNT9AWqwIgeVOWpqczeHeKGAXKY2c66TTVQeiAEUpuNx98iJKGmxw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiemHeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFaw/+N5BsEomaPaJPj9mxNHzqwaMHSEwSLYGcK9DoC5Z6DKbAhKuI\r\njgeKxvK+S47F9OqeHagICECImHVy5zjrz8o5ee+jsaSge8bvyAeHlXijAdvi\r\nToQ/OfqOI42t9Sfhc2CyGQn0YQV8gX1v5TjvwMao4CTYlBtqM5been7JTMye\r\nP5NN8nwc4gpQ8WBwbb095R8eKSls9fl4faPO4AkAv2hYpoXIj0P3eX1iuw7m\r\nduCXqWzdadwRrz0w5+gStjvVSWq9fUkPxesQazitQGUed4eVBWYZobfkiFfx\r\nWSx90TI5U12XlYpMilM9e8zuLsKo53xILH/lWTZUPwj4jw6eHEzGNxqEj1hY\r\n0zBdcFaAUFnaT4PAsGHPu+Y0PuHMFcXc156TkNbRrr/UHLY9PPnkr0oMk4yT\r\nB4ziaJehU3bSSxnbe+MAh2GgTiAmxp6rLA5JHvMIUpWhJg4kKZhy5Uq60PZy\r\nDize0/ySk24alKbG3e2VA3Uo2HnJRCZdfPXsAOd/zpYYscSEHt9cbIxlAybn\r\n+sUP/6EzpzsECoNRCYS8MpNm2onHQhXhG5MMxKY26o0W+mMiZTVg4FkziAEr\r\nkzwopTyMDPJ+rSglliqNf4QMJ/pH56ogE6+V6Pj/AMFXkxvyV4FQAZioUEQ7\r\nys6nG/7DwwIodQKaI6kPjaSF4gIeKLc0/X8=\r\n=yR3K\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1771-84.0_1652187614124_0.14976494014819686"},"_hasShrinkwrap":false},"1.0.0-canary-1730-85.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1730-85.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1730-85.0+657d4da","@bodiless/components":"1.0.0-canary-1730-85.0+657d4da","@bodiless/core":"1.0.0-canary-1730-85.0+657d4da","@bodiless/fclasses":"1.0.0-canary-1730-85.0+657d4da","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"657d4da46f5e2f986257e18ee6b61f75605f0d04","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1730-85.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-mbIb6wqPPh6uhOaJCdZKUPO0aV23a36gs0QmgOv7qIMWwQUssMNVt11ZVkcRuDDaTuB7bgjLPzecb3i7IRbqNg==","shasum":"5c900143a0f80f5a5248dc3d4d5c30048219c2c2","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1730-85.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcrk8PNTjRPF3DCZ6OeKfTc8rz4zyVSNyzqheUR9bAkQIgYncmMDhp6xFP0WnMzQRXCvmTjcg6qEtiQsOxMuLL/a0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiemJsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHyxAAlgzf9eZuq3OSGyqngQGJg95FVYGnXlXn8iEhMX95rX9BCDCk\r\nTwsN12wxGqqFDUBW8yK0mceYWiSeTUZIg+rqK3ynBNS9/ZLtIW93dVB0gYl/\r\nvq73REW51BjAbb6KyyRtxPJKw49ARbF7OavWsCn1+OT/4KeN6P1WrE0TSHGF\r\nO/NWyjeYQEXeBMEsqZEi1MBJkRk+74j/Mm9of9E+ix0pPGplr27CdNwg/JB6\r\nZJgZIM2K7mkCxKV2s8W6GkLnQ9wEfRpnKP2oR4w7sLySzoK4v7e1yz72XTUR\r\nSMAssNKfZ2iKywX4YA1pYJ4Py6wUpo8Z4nbZgOZi95jshoZ6y99b4ONSfM7R\r\n6Elj0vdt5k9UE2ASLoh0HTLTWz6d1MPdeUf1ACTfaX3gQWtOD7xMRUG+4+He\r\n7RQ/40wS6vYr/ghnSyJjihBNty2zC/97WiNzxipsYRfGfQhRWBrD9wseFBdt\r\nuz/7E7KwCP2HCEjgyYQUhpmLYPjjdsYXyNJDWIKOMnVqyMLqM/NhppwPbfIN\r\n4Ads70VmP8+wqJTkXrQwBJAzKsHwFUE/IV1AaRtYFVQl/tnTToEge97NvdAc\r\n+VRSDEL1hNFE3N7alg+sHW+yuiejKjr9f8h0aSpVkU4J8+DcSnPuX72DtbYB\r\nos6a7v2eTrzQNLi6K1OiM/a1AbLrx9dTP+E=\r\n=wlW1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1730-85.0_1652187756696_0.2586724697261087"},"_hasShrinkwrap":false},"1.0.0-canary-1772-86.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1772-86.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1772-86.0+657d4da","@bodiless/components":"1.0.0-canary-1772-86.0+657d4da","@bodiless/core":"1.0.0-canary-1772-86.0+657d4da","@bodiless/fclasses":"1.0.0-canary-1772-86.0+657d4da","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"657d4da46f5e2f986257e18ee6b61f75605f0d04","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1772-86.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xy0PVMw+0LUinI8UMGX0BDLHXuEMgup5OfWjokKuS1pk2hP3Clvk8NEbeV9AZhgy0mPf3oiqK9AhF47EGunRpw==","shasum":"fb92ab97d31ce25cd316e996795a3f5541cf2e7a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1772-86.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaBe1UnbcCTw5pPX3Vu/SB1NkY1FnvP8oc9DjS9Gyz7AiAegUD6QF14XgRdT903pM0VFpKHmSsR3TpSUcqlN7XL0w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJienXuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTgQ//RbVSwWuuIygt/xQXJ/7CuDPzeKemJaR6eefjzErVa6GYL1yn\r\ndfrfqFFknoeDBKhthbzvqckwkwIdUdfK8Y9PzwT55QZSFyxhQ195HEdFbEJO\r\nr7s7E3owFt/+zJk1cKQYckDz9PsX1tc0zIDH5HH2VmhDu5saHP0Pj2ECjMWg\r\nYMHGnbc1Cg0n9zkAcmGb1MoFjF+OxqLBVF3aXFIkY1+/GS4lpmdGUl6MiCCx\r\nLwc2S1uiuJAuPqqSmo5lHd4MeHTeS2T5VvzFkmIGnnba3LbCQA0WcJ9nwIWq\r\nMufkRRqz6rBO2yWvgxXH4HOY6UFMZh0GaMDS2gcQJoYUaTaHhnOqc8piDPVW\r\nLJ4/1QOXDqWuOfGNIxIcY5W/ye0ZrMO7cCdHhjmvZjZoERuTxj5nHY5xCqAX\r\n98wNT0aodE2fAE4cKdalOzKKJtSqd8KBvQR1t/bjI9hDx/Rw9I4D4NxAuq04\r\nHHtGpbLlWBpbFkvo5sUXKesT/3/66/Bwyq2qpYZiZ7zXiTiHIInQh5eG0GI6\r\n8aHofVvyhbiekjilXUf03G1YsDWSNy2TyRyIvRpKj1oiCFuWQaLhyw3CfisL\r\nh3AHzi3Wiqn1UVYsS1PYJxvutASq0437x2mcQ8YOqYTVqe0CRGsffFHeyp/T\r\niJnhr5ihqEfy5VYhWR6eSWHn90/1UtNwHlw=\r\n=9+Zl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1772-86.0_1652192749920_0.9440928575261354"},"_hasShrinkwrap":false},"1.0.0-canary-1772-87.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1772-87.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1772-87.0+657d4da","@bodiless/components":"1.0.0-canary-1772-87.0+657d4da","@bodiless/core":"1.0.0-canary-1772-87.0+657d4da","@bodiless/fclasses":"1.0.0-canary-1772-87.0+657d4da","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"657d4da46f5e2f986257e18ee6b61f75605f0d04","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1772-87.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-O1Ap1h2Th1ZPGEzWC2sHHuGY3qKAEhN59sZ+OJ6J4Rs7Sxry6EpwjjY31ejUtFDVv85kqNV7gdI4lPmxkImshA==","shasum":"d282155ea3674ddec4feb6316c146187045b65b3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1772-87.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpXabe3+jgCDGJWYCsdgfZXRGEMfTcwCSYTNaJRrFaSAiAarUwTP3nvUOZ+zZEBK8BFsb+wyU/qzR8Wog5o27oY3g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJienhoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+LhAAiY0IvTjgLqm3IHOAs6EbDAnhPU+RzhsaQsQID9iFKCvFcVUi\r\n0jLBsqhxTKe85Gosi91q5wAHeNSUeSvXIfAJbtP3SXZ80EZNx291hSGxFm9L\r\n0f1MyBaayRh5+RuKoLpJ/wG0+10U8IpHNvryJpFu+dWQ2ZJCGqDouzOk3o3h\r\n1uejj08rrR63XfhfkDkxAXItPFV9tpTjJVS+yDdjXcnWh11d1fU5bCqLOwqi\r\nTm9Ebw/pOfm3/2HzWLwUH4cS0v2lhZ0Blfb3pw+Jl9FMdI7x7nU1X8gwGdiy\r\n/d2c28cMDKLxlbtZ5b2efVp1HrYwSSJeaGpkK5NjqQx8LBgDG+//mevia/x3\r\nVNl4yXfJjdi/EmaE4NvisdpGlummjUaNt+SV74RYpee/v0Hifrxi2e4QjnYI\r\nNcyzyHJPvAgx7MbM58V8G+F0+U4/yZv/q3qj+z/OJcTdWOaWH9dhkNkXlbvT\r\no0XZAMRBmzKk4ti8gBDUCffAojPQyhnhTIdA+xnT2pvzkLlQbRTssTY50UN7\r\nYVQV/mOgqmwWsV1KPAV7JQFAvRCXKEI9MFAZMuCsh9Yi//2JLtL42h6LL1aV\r\nX1C1J7jf9qu5VZbyTs+lAv9HFw3WbPR//tpXjXVOM8YB3spY1NXZtCEHvHoG\r\nyICEW+orZEptN+iA2Jd4ZzW0T4eeZ/TiDH4=\r\n=pmZR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1772-87.0_1652193384466_0.7886589159130395"},"_hasShrinkwrap":false},"1.0.0-beta.15":{"name":"@bodiless/youtube","version":"1.0.0-beta.15","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.15","@bodiless/components":"^1.0.0-beta.15","@bodiless/core":"^1.0.0-beta.15","@bodiless/fclasses":"^1.0.0-beta.15","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.15","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-X89KKsOQQWWKq3myD+d17Qg9UuhYZ9MirnwrRbnoP/5Be8KJVa3cqWKePmHXcoUM2vHsGr8rCqvDZt74L5yEpQ==","shasum":"5db9a8c062951846720cc69d0736fc7efa242c02","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.15.tgz","fileCount":22,"unpackedSize":229665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBe0KmwvvJ0gSfxOfs+vjE2OhFp9e04v3dWM3qxdqfQHAiBWJOs5K6ZdibDRmohkHXfc267mHT0OH6gx5I+J30qjZQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJienulACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfjBAAomvhWuVvnoYTxIeolUWBLxVBujs9y11A4GnyseDFPUlUEzxK\r\nSdgnzR98WJkC2DyYhdIzG8SCSsmdxwqgqtjaftd2XLoaajHJjniGS8rggEHD\r\nr/icRv1uaPfzYLEI2ZhBsDXdjcZH2AlUH9WmKZrCR4ZqqGpWSbckxCrVVo28\r\nyI6tXx9+aUPDZJ4dFSYbuewdN4HS3s09YYI7EZmsxXnfSo2GBazlx9QauZX4\r\njS9FuHrDgNJRCRoVWcIWcNmkd5zxQ7lZuqoET3xLJmOq3dM7hJm91++de6H6\r\nMC/gcyJYsBptztHRFfMPdg/mLy4XH7+Pc8pk5SFjb4vNroztZbH5sCjk3D83\r\nLM2yV3SX/Opkjvu5WkKmzfTUOOsIj7g9Iuo28IAktlJ5hY3GI2JwuOvkdCSF\r\nyKFmRJaTrlLF/SPWVS5vQGZH4V9i1zIgpLmcBY+WgYqnb0XFCLftECV4K0to\r\nyUrvkOLyOaYj7mL1wN4tqan3IF2iXKRiCmiWtoUPljCdVUDcNDhK6h6b0DjM\r\nNVrv41CoNDSu7mQSKqKkhNJRxd7hgRf0yy3y3LR+2PXzN9y5hFEs2YjZ03PI\r\ncvxzkkN6BL9o2YSbeNOgCWWgoSdWhHPG3TptK7kmfRRamXb8SeBPZnaL5vun\r\nwC42CZUgNtD5iad7uF3ZiTmAwq7P1pOGM7o=\r\n=oocU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.15_1652194213134_0.812582767570061"},"_hasShrinkwrap":false},"1.0.0-canary-1685-88.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1685-88.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1685-88.0+6caf9f5","@bodiless/components":"1.0.0-canary-1685-88.0+6caf9f5","@bodiless/core":"1.0.0-canary-1685-88.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1685-88.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1685-88.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-WqEaoB4rxGKu14uAbISiOpI0g0CCgyteEzFHwPw6Pi1Lf9KawWJqDDCqbn/2IfC2Y/ZW6YkIfjiTy3phKUtFfA==","shasum":"fd8de1f250def1f6c0d30d05df659ada8626217a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1685-88.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGScAW/6HWVFNsL8a5Zs/AVRciUONNPbyctR/t9EncvDAiEAo0gGdpGXmrhNpxn3QmMiLfOmrT1mQiaINxl3qApyJIc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJien8bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK6A//R7xQfOEAK2KbJteOm78Oe1J89zOOpJrQGsEuqbKQScqD93p6\r\nB9YCSE5QV1Bh88yPZTR/zRj0hIII7BbNVSX4+VrugkmlW4dUQXKwd0DnFrKV\r\npzViolnTGKRPhMzUxNhxUN4eAFev9S/xaymos09Pc/fW0ISf1VYD1hYO1bwz\r\ntOMROxEwiJ1i/iok6qzaX0Ngl6KSF/zGDY3Bd+KAm0Uq7oWq5r+awbcjIbyC\r\nRDel12QLvgAggpW642CSkvdvxuQywLBC1r6KjI1ZgAtuLxpQV163wx6ihLoo\r\nelzPR7UfKoepdnB+DLNS/mt6bh7yWNT7zJZ31k7433gV4swsDlMHm/0jaa48\r\niarCvdsKj4Sts6nwa3oaK7nNem+9zjgV5teBXqo9OOxriaqBXAczNmBtdzee\r\n5VrbM50ggzySSdVCT8Gvaso6BZq/PwMaWnC6B6M7eu27xw8SYixrhmunqzr+\r\nLaRY977VIoeZ1ubGk8mn4RHE+H/uPGpieDEPktx/PVl6iAp+qSAXXbp3XGxx\r\nIqkce6nGjNvs6zHgRRMAHjAu4PZPM4xOuvlgdV5MEUvyBgR6IsY8JoKy6pf8\r\n0ZnhXvcjUpvKRLIubtj1U0wjhRfCddklk9x37S0scp7/kQLwTurAbz0NLP2F\r\n8rAV/X6xFQTSnXQBg+WgQM8UWMrutzQDd0I=\r\n=E5W/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1685-88.0_1652195098989_0.1927014614721223"},"_hasShrinkwrap":false},"1.0.0-canary-1730-89.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1730-89.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1730-89.0+6caf9f5","@bodiless/components":"1.0.0-canary-1730-89.0+6caf9f5","@bodiless/core":"1.0.0-canary-1730-89.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1730-89.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1730-89.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-OwVV70VTLERu2yAR3Yc8aPAFbUVrTK0JvIU1pAT3utjinmkyasTHkxPLmlr/a0jQ/fodkmmD7bssgpSi/MJsMg==","shasum":"3f02975bbc331af8382c66db689e675a7b26192b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1730-89.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHpaK3+Q3tPmNP4Tuy9SRiFFGUPvHO56QbtA42ajACbHAiAjQTFC3qvd3/IBAfW0E5jEFXtifIZDemq+oiObist+gg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieoLrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGSw//XKIx3/dKeWmWJy7gkrOrATFLGnDip/G+PHdTz9nkZt3M8+c7\r\nKpiaofLB/GYTyuiVvp0PGp4YXXAj+cPDEIfJYVc3e6AQ1R1t98phC8gcD1N1\r\nmsZmAeM6/7FPwgnq1OBzFpVJmmL+E0UgfOxpBJJUSsubRfryRy9JY6FLbe4y\r\ntzk/KJlu5j2he993wuS7STV7CV4Ot4pTeSRF3B2TCnZ53wODIl1H62ZQEwDx\r\nQTGR0i5ukFs5Xy8Qt/cU1V/m2dBFpmky1F497wg2M96OvZFeRFFzGUNG5h9e\r\nVYZsZI9SD58nNgjBS6QAX1ajk7wxwVKkyINXVIokQut42yFpPWo+J97tguEe\r\nUeWbQVpKSMjWBvEW7gJhzkFcOljXjQxk6iBPIuZaXuHupwRc2tiwHCtV6LZU\r\ni/yVSM5RY+Bf8YNPu4pdTXSxktmogS+SOmuewes7LF9kQL778n0Mv76aLNzT\r\n+YwJXsAoh5pyMRdwB/npUumpz29wRAR3Q/5bVrz/nLyDFRi69c2ik9Y8vBXQ\r\nFv6fXummSF8ItGulJ9Vmw00KmDN1FWh6BxaaslmeK5CLLkXG4cvdgEq+WCr7\r\n6XxgW8XPPS0WuSuGuHAs+RC6oOTOYF0T1IFXcMDCFe993S0BF6AfQYCm1aAT\r\nSIdQ4ZnG9N8EV5ydNq9y0Heg6BsNdtaKw+4=\r\n=nP1m\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1730-89.0_1652196074928_0.7512202254378288"},"_hasShrinkwrap":false},"1.0.0-canary-1774-91.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1774-91.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1774-91.0+6caf9f5","@bodiless/components":"1.0.0-canary-1774-91.0+6caf9f5","@bodiless/core":"1.0.0-canary-1774-91.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1774-91.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1774-91.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-APqiqmhbjEpNkt6FszT07I1iUHWBTHoVEKJXmblnWQRM+OPHJL225wQiN1e31c4pAeFMUAwensvOuU6tTgMw2Q==","shasum":"c34a9910b104506e7b776b6fab5d763330ca3961","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1774-91.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMWiDpgHyq4dZHwD3VwHzZ7HIjlyBNyzgMS/RsCZNvSgIhAL0VQpgZRfhj2uRlYQ0m7r2CKBj5RFfzOhtinXj633Zp"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieoTFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxAg//YUH6a4bnp8DiHvClXkFFjKtpVv8Jdg+WEGu9odTA1GydbZGR\r\n4cMP8IP4KtBId72kXHRc9Hx5nKxnpmejDjLSgB/+r/u4YW55OWph+lhyTDDq\r\nptkMjOjWznvrgHmDLCPPyscnn0nc0qZsUkKRA4l0rH5Gr+KxfLQyIsQmNg7m\r\n504Q3jGfYtHm/G3YlljA09+TGXK/doiCHNGgThluPx7mgixbDArD5qFtfrDR\r\njJu+8tmkb/3HS44f4L2I32dJCrmoMa2V+FMFVMMx1e9lApIYYOv5rIhb2woz\r\nGlIca7AiBaTRizTnBFpjT47tplJENyP26PUPE5+ojXR/Lka7eCHgY4FmBU5y\r\nmiktckAFdX/vueT/uuZX7Lsy8Lxr1fflM6R8IDxkwTMVVHL2hqnl4Qd+P2gM\r\ntE7iZ20qxZSAb7RlXPY6Ru3uwT1ihycu9FFFZnGPphPVJh/S9Vr17xKkynP9\r\nWbe4Pn0U2pHIp4yB6/oPFGdmG1fH750/adH5u0Q67EuvhYCLUsOGCFoo+kTw\r\nPoZcl/sboGfmDVOTrZvbWrxyLKQgf6wuvNo94EBm86695CsFF7iqd0tT95XR\r\n0dx3CY/loZF1naJQTWBE5864NTJQEiIexj1Vxqp/6k9El1uWgWmxBfEZ/rcY\r\nRgq0B09QE+260dXEXtSF0j2EdFay+L/cP4E=\r\n=vOhB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1774-91.0_1652196549634_0.4044543747481224"},"_hasShrinkwrap":false},"1.0.0-canary-1773-92.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1773-92.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1773-92.0+6caf9f5","@bodiless/components":"1.0.0-canary-1773-92.0+6caf9f5","@bodiless/core":"1.0.0-canary-1773-92.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1773-92.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1773-92.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-+8ryEY66/cU9vFgN21juZbCLPX2R27eQUVqmX52GNizFVyIJiKX/2MlMQ8/cX+/DyJusZtlCsYt61Gt4BeXlfQ==","shasum":"3435ce2931ce2f3e42c5dfea734c3280aa45104a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1773-92.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICQp6VhtAFLJSMb3a2B9ZUm3m1Xo6F3ZectUUBNT82fxAiAG3vIe6ON8fJ9x7nsiPJvZDaEhHNEV8FDKIlzdWziwRQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieoTdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSnBAAky9uNhft0VA0OhmaLKgSJ2hMuMkzeEY1mt6AWnNi0wolX22+\r\nl8o33GbpN7cG9i0NijywTu4shfCbAERtLQ0OEnV3D/eWzu2obISvRLIcd6/J\r\nNddIa5deP6R6fmWT5QFCocLla5SvgSbiMksSNHEZ5RbUa9BQ7zGvsXhzF6iL\r\neqKnjJK4LbGn+JSeG8XT8VjiL7DE9lHcTdch7GmgWOIn+AJXB4tICjbdM4Xj\r\nYuOk4qruAukfjzggh6aiROD0U0D37D28+OpwsjlW7GXZ9b70Df0EowtF4yUi\r\n2C7aOQXMzA9kLNG/BZHHy4cd5Wffq5GxLPZySF7Leo10QwGRWTe3u0OfEYF9\r\nLwS6Mg85agtIcSpf/H3aXHLVZhVvT2tPYm3gGIpLtarUGatXo1syrXT8WZeb\r\nYxEHOOE6LqOEKnG+7dkYhuMRZWvT75v/SnCF8SiXAItHzqGO2gSHUZgDCCN3\r\nt572r0spwXv/wwywEEutb0DO3baprsF1xGKNWl56Zmww7XrONyRdPvBBeqVF\r\n0I9JsagT7hH6sTABrqy6RWzydhr1LHJ2UFUBMEqEtq8mS1CzHS28AgUG3w2s\r\nCSQ8Xf2GbGG6/yb0IOsoixr6t/fZ3eHJiSLzlwiaYZ9acY6cE85xriaGTGy9\r\nlEDdGJrCDjmG20STUwjhSt2d6JS+5OYLxC4=\r\n=vLJn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1773-92.0_1652196573008_0.5920561428249966"},"_hasShrinkwrap":false},"1.0.0-canary-1774-93.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1774-93.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1774-93.0+6caf9f5","@bodiless/components":"1.0.0-canary-1774-93.0+6caf9f5","@bodiless/core":"1.0.0-canary-1774-93.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1774-93.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1774-93.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Dbqz5E8qiUD2Gn6IDLdJlVc/3dGTzdJa59Bgp0CpZGtCEcUEmZHIrVHpzlq+Zx6q7yR3yG5PXuSXPLLgkYHHSQ==","shasum":"0d9838436885eb6b53bcdc7e99df90cf3443722c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1774-93.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7WFbUgdpjsSY7ZDGBWhShWm3g0M+XdKQJKaJbzA2TUAIhAJ2vvK0y6hdt2UGktRirrYE85She+khxDd/xJVtIdS0B"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieoVwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4bQ/+PeF1mY0zRlA6bfolIyhVYxPJWGPjSRvYQTs9ZdP4pUIbKJhJ\r\nzzdJcaeEWheepfBvUbK2E/EMAo59R0UfSqDYODzafdc/VD/O+bQB3vuA2kQ+\r\nSccCoujOsXMc8qcWEcp9DCOilvRlTRQxRVQystrmBh27Gf5Kjy2ltYJ+1JPp\r\nH2IHgdiIRjzmtBG0ccpoTEJyGNiCOOgMmckULtSY5kQBnot/VxR8WWnFScCe\r\nxYo+V6f+qQ1IskVggZ5Fmzw8NjbRXXhyJHOXJVjO1f+Y1L1ZzF5X11QCNWA6\r\nckwLTsN4zUKdb1lemIy2JisAdeJYd9fedUB79rGx45ZcnFcHCbiDh9wriHyz\r\nXjM7uhhz4NQoicmhRoVUTaKi8xHnZ4yYqDVfXCmBLp/40tcZWMepVWHIy1Vq\r\n1Ok76684R5/5mU7ZPguH20Vu6lsotyVsZoOqEGNtZiVCIeOzJpucjSWKeCTT\r\nqZaVuLxvb9mUZdJuufbmjbWZJTGW/gNpT6k+nGNY0CMi4Ei83b1Dfo+OiGk6\r\nc37g6wwwja4l9veeMsyAo7a9XaL3E2gxB92m+H/Jyjab5TEYZVNfL2TgN1/m\r\niEJZbX8l/UiJFcu0aOQteuVNuD6WOKfFLYIuNy+JInRsHOpA1BQ/LOBNEn1P\r\nkVf4+5q/p1B/vAY8LjbdflSX4bXc9wNLE9g=\r\n=hjz+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1774-93.0_1652196720467_0.5625121805577693"},"_hasShrinkwrap":false},"1.0.0-canary-1773-90.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1773-90.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1773-90.0+6caf9f5","@bodiless/components":"1.0.0-canary-1773-90.0+6caf9f5","@bodiless/core":"1.0.0-canary-1773-90.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1773-90.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1773-90.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-8btmww+QfbjZsrqvZpSLKXq4FPOPx66t11o9Unsg8evxbYZuNQDMTz3+F2mjqpQOOuKycpZEtIqT8aBgP8vMFg==","shasum":"20cae4f21686591c929dfc2a9c5631469c16583f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1773-90.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA2pHkt9FCyuHtU5FDdcDGQy/IAC9SL2i9M5997asm4/AiEA3bs2E82J/+Ia8hUB1EquIp0XlML5bDXepyZZFwJGDrg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieoW2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo10g/9EPgV2VDVWUPVA0tsRmEK+M8NUHLIuqN+OedbbCjSyRgUrR42\r\n60MynqG+1X8Lp9RBvvYwUtcydwRsxFTiP5qHiM096HBte8zxCE/gWgfYR7Nk\r\naEoZCTKAWJUcT1EQHmHputIYNZsWkAezR9eJUEBDv43Fi6rC4tTdw+2uu6Za\r\nY0NcR9UT8cQ7AvgkJ/AHCx6cmv6FNCuMtVNxvbLy9ZPQFo6MDcVnYt7sQ15h\r\n0xhyeYWH8rE3+gHlZTrWVBKnhzRQXOQ/e8Hbdh+62pXFHzH9jGW8YACuwd5L\r\ncyv6RLX8JB2BXTLGW30bZR6GcDVmGN04CcZBRcntguH5gel9pKkZiE8dbvXE\r\nIfYtzoNPC38EWwk78QqmS1UZS+yK+kXN16ZP2AkRRuwx/e3kbeEo2hd2LoQa\r\nk7Jg1TBlpEWmeSgpCctOxjKdIl/yV0gIpFcHV48QEzKRmf8WynTLTwk8/dmK\r\nk2E1wVdTWzZLw2BRjUBZ+LTRD5UR1b+bdv2BitC/iT4TZsBGU0k4vfq2H/0B\r\nBeMOslupN6T2y5gn28uD4WpERzSQdmwt/MIuDK5Riu7Ub7c59fIpY3025sFM\r\nsla946Sm1r38uhDF579otG4wkTu6QJaf/x/KXWGjwQbPGid1k0WArwRxV0Ag\r\nFtWl2COGznCnu7txkMIG2cGNt8uY8n3/yEE=\r\n=5z/G\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1773-90.0_1652196790040_0.10602866176858394"},"_hasShrinkwrap":false},"1.0.0-canary-1733-94.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1733-94.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1733-94.0+6caf9f5","@bodiless/components":"1.0.0-canary-1733-94.0+6caf9f5","@bodiless/core":"1.0.0-canary-1733-94.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1733-94.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1733-94.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-hBzi82Wrun3j7v04qssABQQ4Mi2JU2Mspu09+Vk4W9F0n0rQk6e9VMQbq5QVEyggFp2OwhL10KF3VXGNfJ1Opw==","shasum":"63cef6dc18497b5c246c05272004612f7230c8e6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1733-94.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+pRCip0kX3iJcKg+70gDor3hrApzOeJKrgi/soGgJhQIhALinuZUZN4P8ga5C9LZFB51yi4iiG5lP1QKamMkv9f9U"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieov8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo6w/7BlTbU5qLxACUIO3iLTteGEKzcpeZHUG0jUl+zFFu4eXqKSS6\r\n+YugAtaC+W9oS7KCwH4Lz7SszDrjA21c5nm2eeGp+Qprq0T3Ol0EAGAoqZ1D\r\nqtCLbfIq96glEfM/bF4sO1dXXRRtbE6s3hpE8Put6JeHowrAcgYyxd/S5RUs\r\nnPHdcy6qixS8QXejEuw5o7K6+jPVxM+rZGshoTpMqU/bmljEAUdxFUAdkc7+\r\nJWp6ZmBE5rPw/s1APeh3BXMpfXd+k9vYQPV98mJ+5z1UuB1Gws+GdqPcnhy4\r\nNDZhpR66kDRiOnLTdDihvxahniZbjnKLwO4VO3+mOdr2tO4aHeKyW4Y9EPLU\r\nnEbPglzJLo3VAMbxLrGByrWBTI7jJnqEpGFn9kN2kpBbYLoirIhD+1DUufJj\r\nnSgOYiOdo7N3TzXEGTcor/2ki9Ou/im9rAFNQyaKTGpv6LraFxbcdBUI7JYP\r\n8lIw5eWbtUhc60uNU9guGb8+7ulT9RwUSOZzlgfzRPzy2IqjEdCyVJzlrpqK\r\ngCMexM+Q55V+UuNFeKeLdhMj0MqeA+xTqYeJGsIZ3GiZvbEan8Tq6t9PLHUK\r\nQ+uElmePfLiQgCDR3Sc4rwf4VPaH5Rc7YX5sbk7TAqY6D3wnnslEVzZGQtxS\r\nftUl2Va1aNgqvYW+x8LzpGy2ZoYRqHpQGic=\r\n=6G0n\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1733-94.0_1652198395998_0.009484828897494024"},"_hasShrinkwrap":false},"1.0.0-canary-1775-95.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1775-95.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1775-95.0+6caf9f5","@bodiless/components":"1.0.0-canary-1775-95.0+6caf9f5","@bodiless/core":"1.0.0-canary-1775-95.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1775-95.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1775-95.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-t5WxokDcTXEguO7f/Adbln/Qdj7+Vxpj4r4UP3CYbPFgTB1tVuuss1ujIJ+MbHCLHudI8FKHEzzaqIIPDCNtlQ==","shasum":"52b3eb048aad2ea974d52aaf5ea5e3c730dbd0b9","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1775-95.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOTlScvtU0W4PZdj3ur36Vf3PGJDdjP/lmwkan4EAn8wIhAMFBEsKoCN5f2rCvMs3lN2EsbXfouemxGmYDhYDh7lAV"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieoxMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnTBAAmu9/E0/rc63EIRYZ8v3L8+rJa5BMTGd+cF4IDk3lmrgWB32q\r\nA3c/FtKaubRY5GYTo+DnzR0CddZThlh3o2RfXE/WSFPbk0U59PEHxjQCierU\r\n9t2+jinShRFcyCXBwyIQ1yeHWHdWMKC+obPiQSrS3XyBVV+cshWJBG2K+/Ny\r\nB+4FMk1Ul8GcIOxMQNMA5wV2rlutZuaFouGvsYcJkHEOOizGWSgPyBe9x0Y0\r\n8N0kCUxv6tvRLpbscI5IwbFIaZfD1/74u7O1bW5gHZgOhfBUCH/RMrlu0hS1\r\nwg50XoGZAGajSM2qKM6xAs4zVB9t2AB8NavaUINc81jOEMiiaCBP9ggsYNNP\r\nrLQdYTyIjg4/hVpb3V7m11ZyAfFriG0Qqj+tQJdNmM3GouGkzdFcPGHpxp9g\r\nLRWSW8+TGo94VqZKQYisVqrls6TqDFUhm8L062XKOC/ua5i2YAqzfQe4XJea\r\nDajHcBoAz8+PDOxAuYlcZM1pREioBavmaHOZbp6y5PuW006Jt6NcWxtEONS2\r\ntl4MzMDOHptCshQnddti23FaqukDmlxqmilNWECMri51HcarM7FAr6Xr5Sr0\r\nN5h9lFTlSbTW4cFkZaYV87zaUqXZGOhGX02FWwiZKEmfbcxwtYhdIJQU1rZY\r\neJoaFMyXzV4jqR5HuvE7SB6kb9FkXlzz7YY=\r\n=5/co\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1775-95.0_1652198475805_0.3666085838220834"},"_hasShrinkwrap":false},"1.0.0-canary-1776-96.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1776-96.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1776-96.0+6caf9f5","@bodiless/components":"1.0.0-canary-1776-96.0+6caf9f5","@bodiless/core":"1.0.0-canary-1776-96.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1776-96.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1776-96.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4F6uZ35SHEwnNaVWyRgN0m6KxxwTn9yzxMMFY+5NB7QgHls1LcP8BwwP6dygPQaZBkKvmrqAc/OfKov5BYDDlg==","shasum":"ec7aa887a95f65b3408dc9bfd67e8698e6747c4a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1776-96.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo2/ayEtKpT460z9IRLQSpici70v1h+VxiY2xMOFpQSwIgFyGr0YefV9nrmklt7O163jm5bbDV11f00TFqUv2+eqg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiepABACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpsjw//eAMCr2iokoVMBSyHLAlWrpg/a7S1ncNUCABD33klcphhf9II\r\nnH+ZrhMAowA3/zR7tjxOS5jQudljGlFwgkpwGwhvZIz1urwNYnaKrii/HvrS\r\ntd/PyD9v1aTEh75h1Mg/xnm52VxbUiWynteybOfpbsgD2opVG6QrzDu01TuJ\r\n/UJfERZ/BhO2/kwThEfqIH885yI4uqDB9rsM5cVUTOd7MzwZg5xop7+bJwX+\r\n+rV6fHz2wfY9/2x761iVxYE958PJ8LFMMt50JloSdStEpPOBM2/Lcscwen4z\r\nRcT3FHFJylXnjk18p+t026XM90DlaA7NbmOtLlo4H/X20Vrv4LiHN5FPkI++\r\nR8axXqQVIggZRvTZGNzBqhSkyzfR9WM4Is7HXVQaywgs119i82DfZ52XAYcu\r\nKxBz0w75XBv5bRRgZFMSFfrQ7ZutXoz6DU57aXW+R5LlFKEO3JtDSckofXUH\r\nqwZCnShJpxmR3Rr6XLI2TvQougCS9+vIN/wBCAn9TzQgAsToGyH+OyJoov+1\r\nCMZJjoewtBNkmBWpOQZyaG/RPZ7pCvUdIdA6qysQKtVvaJcjYy+P2oK8eaz2\r\ngW+Y4hnSMRJ8kTxQs2dxjq2x8BR6qc4lY5zZSC6T9aBfFdWCPqyHKm3F8Zvj\r\nICVb2v4pskgw5AicuJVhSDNbgC2wl297d+g=\r\n=IbAU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1776-96.0_1652199424852_0.2062626167652284"},"_hasShrinkwrap":false},"1.0.0-canary-1776-97.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1776-97.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1776-97.0+6caf9f5","@bodiless/components":"1.0.0-canary-1776-97.0+6caf9f5","@bodiless/core":"1.0.0-canary-1776-97.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1776-97.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1776-97.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Qk6Ca6dZo76K9TqEcjh1DEbyIlKr2GntZTzPJAR2b2Gdtw3wgn4SXF5A+VvOo3QFRPnK4I5nIby844BIx336+w==","shasum":"834e90f74fb4137ce449f9a4ea1c54241a67a0b4","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1776-97.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVswqIXNDPPtMnSad4RK9g/w+EC8/AMwedbngwR/smWQIgeFy4Rw1O9lXVnp9K/BOHBEJn1zWA8/aw2trZxfFIdaw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiepFmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3AxAAg6y7dFRHj/+8IyhrIOtXcpVmJyQWsupzUdCotuehh/VFvkqZ\r\nq4UpK4D4aAn1kyPNigZrjNlMv1fbLVq9EqiVO0Puy2wKlsDU218OC7Wan4wT\r\nyiNDG7bRfHpLJ3Ni9fivyVYxvN4hTnAhjuI5HgO6iVg963ZuBE/MUu4oFpAS\r\nuOMCbFqkdMgbBna7L45nVwukpBH7wVOEKvkojG72yi7Wx1nkIeDRQQd6HKeE\r\nx2/Z5RK7Pm3mngSeMWIjG6ngWkaLWsH+vOa8CUfDe+NcQnfXES/F5cniR4Q9\r\n+TPvsyE0Ux2E2S+fYakm2ccwZEn1TXCcPK90pK3jh9YC35DpHunlNkNfnNRj\r\ns/iUXIVKaY976us7LPU9eVYDVbG53WFVgZkc2aT/82wSx6L3+lmi+Zwd8PO6\r\n59LSMwuq7+VdwTDXSNjEbjNVjO6Q1nbBVvIOLfzIg4sxrg9IifVmZbnIAIEM\r\nS/bJuJNo44ZN2RTxkpsSfavpFXvKbgIcjbF4di/NgozQm9pPf3P39ZQDL3pL\r\nQFEZOn3sNwCKgeSH66Tm9DnGXh5YPzhzk57qk40r1qCbuA07FFT93hNx2t0m\r\na183qyacBslWnfM9/FA+9PMh2HylMQooCktyu3J9nezhKI9PRUbbytqaUYww\r\nJxf34XIjLiEkkvlgEdPwP8zAmdX5P/lbzME=\r\n=KNuJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1776-97.0_1652199782595_0.6998504178239953"},"_hasShrinkwrap":false},"1.0.0-canary-1774-98.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1774-98.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1774-98.0+6caf9f5","@bodiless/components":"1.0.0-canary-1774-98.0+6caf9f5","@bodiless/core":"1.0.0-canary-1774-98.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1774-98.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1774-98.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-NbM+qi3nbt2cIQUk7+6RiMh4D7/6F+XTdPtH7/skOJy3g60JtPm70IpwydwM+pIV7XvdWB1XvvMEWgP1Lp+8uA==","shasum":"b40602be5a385b30e75c3a173eedb8e8544145a7","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1774-98.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhx1F4+g+O7LYmJvMcQgKyNK/2xAAYfdHPPS5sF+xdjAIgRyIlu6G2IteL6Jws4q7OPkQyneFNM/eUC1IaGbx1HYs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiep13ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9TA//Rk+SY5Dihlk27HGIh/HFiFywgXQIs3oxWE23yLbQGL+uQPyJ\r\ntmnLMHqtDqMcX4ohTpEqnAGBxBrSoGh2frFF6JkPUNagbHCrR6n/eX9X57iN\r\nma3bNwVHCKb4bE1NN6oHEksNyjHcFvrNKjN2jmsd6G3tZWgQBkhU/veSbtTt\r\nvAdMfokGHSjfjckUOSTBt6HUYsF2PP5reyQbglXY1vdOtIe0h3ddkfCv7CCi\r\nMZwjw91gaFuysL52W9Ihtb10Y3xJQ5GePLHhhS2se14KpHNbI+aQTpQmfeoZ\r\nZhHGROvbRnWuLCKVAEH44SOqVGWgaGA3IzDGwUgC9iNrYYJwpSWgAHuuISat\r\n7pPtr5W9fwEmEZYimKpafW1NV1PgAc3uyuPMq2LXwg+EOp7D0ZcMUv5TlIt5\r\nkWh/ti7aQcQdWFjLwK2/sagBS4J7kuj4y3na2H67fX7O7qq12fLGskcmn10v\r\nWGeri91iWfCsyZ70oS8aYawWwG6hjLT82jac63VwoLK5bwJeZQF5JQmAKXVH\r\nQUz6n0iUKx+x275frkHeJnP9ZR4gxjZZV1gGKvL4GjdE3K3P49D8wN1xZW4B\r\nab3mM0yF1Pp9KQbGEyGU+Xa+mhyoZySj++PfZPVu9GEdeNmInXgJSZ1ltBR5\r\nSPYxrV0xDOPQUY/Wa2ddEiliIReRwtRykLE=\r\n=upm4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1774-98.0_1652202870734_0.2114877822663681"},"_hasShrinkwrap":false},"1.0.0-canary-1774-99.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1774-99.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1774-99.0+6caf9f5","@bodiless/components":"1.0.0-canary-1774-99.0+6caf9f5","@bodiless/core":"1.0.0-canary-1774-99.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1774-99.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1774-99.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-leuRiuIfG9gpVuZSsAUPGk2Um4N1MnudUET+36JfgQIS5oNXgg+4UlJe6aw8G9Uf1GARtiO4vfjZrh7othgVLg==","shasum":"95a10242d8f5f00c8cdcb7f7418122826c55febd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1774-99.0.tgz","fileCount":22,"unpackedSize":229731,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCemIQXprHlwesEMWV6RXU6Uyz6VP4Zh2E+T8s3ZpC98gIgY5ERgJVqri4m9PcaFKJ0NnwgK1TF6AT4QLCq8W4zPn4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieqNDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolrw/8DRXD8CBEWFAdslWn73yEFJaw+lleOIhBCW/DufsZNYMJipXV\r\ns29puCzuRBE3lhdoYr+QNxQtWW/5TXi+vvFWhILhG0/noSaeWx2mYAKlsl7+\r\nVgGm+7GTv1FU+zcJTHr6GKbKkG7B4O4jfVTtDGOKXPTy3CCwGaR1EMqPgYAT\r\nVwnQB3d7vtl2Eegslk8WkWJZ5XZ6sQV5COSfnqHSKErx/zC5TKoMCciIWstL\r\nywHy7PXELaDkxUxuOZlNn2A7COJtLFuzu7nZHA4ioRVVBiUTFKktxtCjekCZ\r\n5D8UYAPMZrhzE+atRZ8obKihIe6PgxIYz/4hOnl3FbMSNpR+haWJNVe4FicU\r\nG54ebT4HrnyFxkegqwNfGQtQvPyCe9ID7ZTggGkXz2tKSKcNIE+OVdmRXTg0\r\nxqKmOFWL08tW1ENePZtxuA0XyPcWvY1H3DuzPuvrngfgy2/UJLhKVnWBZlcM\r\nkoYLW0O/wlGREwyO5ES8kKbFokXzfoY/9T0XUnsNv37GqI8ROZEbxQB/KXFY\r\ndj3njE0eMJZpv2c+BwCby/1ppEexK06cR5miaB04bHragyjvEodYF4B/7K/G\r\noTfx+OMtQBhn5S5qsv53mKgTGqis2LarcLICRa1dfrxg4Sl603bjLRrx3lip\r\nuwkm8JPUWbfcKXm9B+gTVbyYDoV2FTXUTbY=\r\n=RaBR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1774-99.0_1652204355038_0.7745057646977884"},"_hasShrinkwrap":false},"1.0.0-canary-1500-100.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1500-100.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1500-100.0+6caf9f5","@bodiless/components":"1.0.0-canary-1500-100.0+6caf9f5","@bodiless/core":"1.0.0-canary-1500-100.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1500-100.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1500-100.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pJmOMzWXy1keWyY3faMh4YyG95nymFLnTvsaiebLfWJ3wNC8dF4SfKWqHGkZRJ4k1VJu7vPZGZ6VhYxk1T+EqA==","shasum":"259372a8ee1e9d45d10154a56df35a74986f7bfe","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1500-100.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvLQn1dh9Yr3DmrH5n1eNzdfFlFYXEvrrVy17oa0EYZAiEAjCqvAM1TtpHSoAWbQBZqP2pP6pAlcO+StCGp+5LuC58="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieqfeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotkhAAofkmtpgakP/suKt2S7UyX7W6RC7HOm/go1xx47LUcrS5fAxp\r\nldYMGyQELJlfoW8spYiTq+LpZcrgXai8qpE2gvuYKmtp/ZtcQ2/KLybJSodn\r\n1uwawKP9VReQw0Ui3BftjdCFcJ1DtG7bxGrdmykQox0NjgIdWxPr9XmSqC4f\r\nhU9pEvVN7ztS2tF4n01JTUPTEABiLtXvUEnrHl4da6KqlREVGfgQR4gxZXRL\r\nk+AoG5io/e4VC89vSvGaIEszI2x9FdNKgsvUo0JMf5rlwfrzt5IpG2wRIxEw\r\n/XYs9IB+FdwmeP+X3UfBTqrHq/VpeOuBh2yTj5vuTdqeWnp/OOdn3QaZD0VB\r\ngM+oDd1ze/uOpitcwFZW0qctmvpyXQ+Wld+mytxgBWpQefK92r0zhZQu835W\r\nTDvVNxBtvYFDnVKRiQjzwRvuTqc4cVwCOtMBVkk9U32hzFihWpFIqKt4LwkX\r\nF737LVP8bIDokjFol/Mf6Gzpg1i3Nl2NAW/cEe3EPhx+2hD87aL22k/V6KpU\r\n/HfCc6XCVhFNm+NoIFT+jNc8s7pik8hWrp7UQKbwE8mvr390AwSO0ivnQTOV\r\n36Es2acMhsA2Ik+f+N6i9AuCIvxXh++LX2JD3LGNPxObJE2fehx9DR1PMVJF\r\nf9uOwNKDR7dHIRvCEstqypckn19uyKDZoxo=\r\n=l2cb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1500-100.0_1652205534533_0.8886347077042236"},"_hasShrinkwrap":false},"1.0.0-canary-1778-101.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-101.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-101.0+6caf9f5","@bodiless/components":"1.0.0-canary-1778-101.0+6caf9f5","@bodiless/core":"1.0.0-canary-1778-101.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1778-101.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-101.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-SRbTTFKvQXapXAN5HlraFs761OPi7jx+9gMFaZuisQAhPQ/to6LWJj1tW1IlyF9yjrt7qq3zy5iApM6UkScdvA==","shasum":"4b8d091a2686dce4d024cdaf51a12a8976f19686","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-101.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICut6xbELdfiHvYJ5ekhd554pVqH/y8Az3Ll+HxLBdSEAiEA9FWogQ1kXTS0WZnng9EbQ8lb2zttMrNjDhPJWVCgXJ8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJies3vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojDw/+PS5RYCr/RlJewxuceSPwY0N7H3gMchJJh6KuAhhdCadXV2W6\r\nxmvU9qPSjuFOEOR6fx0pWT/Zkto8C4bYaIJmQz2TUvLksk6vs9RghFbi+5xm\r\n0NFmcpAhyvTTDVh0ayCfFma4dc5Q22gxWK0qiolkN3thqSXmrRrZVIqyfDwo\r\nCnhGHQFhsXzRgmIgLkUgiAL0f/hj8BqEc/s3viaY5jss1NTRdPpveb1wCHe9\r\n1Q2sqsr8tofULHQLiMNhcCL84ISRijegWDtt56CqPGTGal4E0mvpYQYI5GqM\r\nNzYVo7TOQCce89kHnCsfM5zrvgJ1yimC/M1DK5jouOU+lVs3QEH4etNUMBeX\r\ndRVmZ5hKL96dZ1eF7/ue9zhfltiBlP6n9UDB+fOIz/49qeW72X1LCe0rWpOQ\r\nww8Q7J+qNYVe91TwM6KrQhlZVGwSIqVNraJTtVSXiKr15YJ400G8Azv1UeXZ\r\nw95ujb0aeRetYgm1jMbFrr3rTTFMCblu5CnPY4guY8lMwXedzU4Q+UZJ3ICd\r\nIfUIgDn5Yepv4bA9c85jKcgvnjhjdpBki9hajhCyf4kMdKe2A9qOu1AuLQ+S\r\nHOTB6aT8oKe4YpFsFlW1Z/THfQAE1Gh0sLH+6oC1sv3xPe7JzvrzY66WMiJ/\r\n/D9/eIrCdP2Usm/c+Ge8D2gzbU1c7RIoE2Q=\r\n=QRyA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-101.0_1652215279524_0.9877998785111153"},"_hasShrinkwrap":false},"1.0.0-canary-1628-103.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-103.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-103.0+6caf9f5","@bodiless/components":"1.0.0-canary-1628-103.0+6caf9f5","@bodiless/core":"1.0.0-canary-1628-103.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1628-103.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-103.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-/F7wyUctVgvkFDDCy9j63gzFSDv8iFt3FpRbj/cP6iuaao11JegEUQDBpTQFgoNr2hfTzLR5sLhgCvM5xmxUEA==","shasum":"a279721ab14a39e2c5d5ae7c4f370a19efb3d83c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-103.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCByx/zONCll+ymMSaGI0DgcZ0hA4etU1e064GrRAmqVQIhAKEA4aSZOS0+ZHdxYPULV7FBrCrM3e3HZHtfTwX+ihXr"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJies4oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJTRAAnfj+pVPcugOtv0TfTVGQtMvU54Y7fP625Ob6YC8F5ZcRraCA\r\nNKr/1o6W/GbfNr8TslzTJgrmmOM68d4+31jHTrzgueJ8vqcJkT+FoQfsthU1\r\nuNI6vfawXJMCe52vhaKx1xb92wibZH1AiGnJvnmtyrp+kmSExfMjBBmh6nzB\r\no8UcK82b37UyQiyF/6po3ZnpI3OUJ+Lqmp1plfpZJUlAf842pC1j6gJWtm+E\r\nlF4EeYOPTjs2U428EhzAJbHjZd9Fmp4OB1lmCT5AF+SmHhVD+eMX0CkflRVX\r\niYwJoKyVbTouhaLk1hNQGoQLTibO8UZPwI7aMVkZYkSZeQHHjFFmBrUuY06z\r\nmnSTg4IinmJtFNZIh1jyAHyIF1il/etASH0WFsswV0cuhbb9x8RzfbGrdwLo\r\nmt1zX3UfdbiFPIGEh9fBmRAMqxmRrsjixhJUD5BcscEO9IA1lgNhYOMsduBM\r\ns13KVH++AWSzXr4PV4eeGJ/ZIQobBXtRjCJieV9c5KBXZi0Q+KkNNraDwIxD\r\nOZXdYzOqzKKOYeSALZCBkH1ZYTXkRHFuKbX2x1WNIGnmdtuzEaU6+q0bgVB5\r\nZbA2mb5eLhmcL/ezvKXuMoy5IordnpNo3OsoznrOjoQNhrOQ5jAtB7SlBUVG\r\nq11UrNeF84RqOiQr1xmcMdwRNc0bDmCCvM4=\r\n=QLvG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-103.0_1652215336169_0.9848083424784997"},"_hasShrinkwrap":false},"1.0.0-canary-1778-102.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-102.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-102.0+6caf9f5","@bodiless/components":"1.0.0-canary-1778-102.0+6caf9f5","@bodiless/core":"1.0.0-canary-1778-102.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1778-102.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-102.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-KXOeACvW6oa//OQmcrKLgaQYcb5XsbSLzfcUB7uNXFhrdXxRb7+DJ6XDpiYHwXLA48bVfi/X+fUtzsYNjhj7Vg==","shasum":"51ccd2bd95dd2a100ee56c514a3a191bdcbad043","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-102.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICIg2jj0zx8nomlRZmRjyMo3L6bEP+rE5y1e8/UrzCmlAiEA8z9BBfuHMiznT7EcC65TpNPvSsNGsROuXVbf80Kz88o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJies6PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYmg//UJslmSl4UYwbg0t5kK+oKmmVpTVR3i4MkX9EwaxW/esxKy3N\r\nqPq8oQPomvUjCFXUvXiyvXD2I9W3sSgjKt1nmDxjyRDE9/QicuBjvRUqlBtc\r\n0yj6fStqRV3JpsQYUio0LZzWsLvDSx1DOjx6cm1RrSAVksL95opt/MLqwrLy\r\n5mGwFWu8SzlzdJo2LZiCfNtAA9iA2zn0NKFy9rYpVy7xfQH2J2aZD/ADUEGC\r\naj00F0+/96WXQL9/nchx7CFNfBhLlCXr6tVwgNDHo3RRixULtqPQVsbLn+gn\r\ndNR6yBx/fYBuqqLPgtBiNq4jivUdUpVLcnEQ8/dK4HiayT70xm8R5togYWJD\r\njxVgQiz/l6PZK7IQp8ASo8241WgXdgY1aL3jIHPjgLLYu6KCpCmMpOI0UT4l\r\n5UVIgmN8ShAluI+CbctccFXJwdOHl60ptaqndVddvNhrO84YbGH2WmNeaD0V\r\nFsMroHWUvQARXgkKrD9y07aQgwPdwc591bL8yp1sKgKswwjFeVBligjNzlUG\r\nF3TXwYdWju+1vgACF53BBEt8a17dL2xtqSi13kNqOJE8MhXeZzrgceZPVtPW\r\nIgOBxNCEkCuOrDADjCmQuXpLJrjdQ7gZpVsJ3MwE2xbz4mAX62ll1f1so8A5\r\nN+AFET+yfdX5q8k4wojQV62YKQ0dFmumWlg=\r\n=kgdJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-102.0_1652215439529_0.613163070364086"},"_hasShrinkwrap":false},"1.0.0-canary-1595-104.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1595-104.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1595-104.0+6caf9f5","@bodiless/components":"1.0.0-canary-1595-104.0+6caf9f5","@bodiless/core":"1.0.0-canary-1595-104.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1595-104.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1595-104.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-fGJn0Ob6uKXrpBUgkX6AKrI1a5q6hbIEnpmq5hpxOja7WAf8Lq9J+lJ94X/OYwXcJWcfvOQTtzLPhA4kjGaBdg==","shasum":"6eec3ff2b2ae2549a9638d5144cad31500e6e8ec","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1595-104.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzG2LgTXa2rSnkacdq0vxP7BFdsA8rhVztNiDRIRenOgIgaiIIsjDRubGdFcu/17vnRiOHJ1PZMAWxZ2+yVXfdTNE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJietJoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMIg//QKubmtwHFUvwLsHbvJ1twuKsVcDu/nD7U5VTEfj4X695rGVg\r\n8GYxGyQ66AQUwhObHYkYEDEfQu4EAiW4RrkIy8JpWq+SZ1HsGwAA4xU5D8u0\r\nd04M+pPqqwASiQG4/a60nj83mkjMcp/+mTIRi6iMKyOOxtW9DxxSWXtG91rF\r\nGs9pj8bB16PhtLk3xqo1+CPFcA6MwrxvU9lc2hXRF6o7Kc7Prr+xuUJ8uZKU\r\nxRHHpLfceRpXMmTMfWEPJhT4WUWJ81i3g8KPJ6qpoOBwO3wsfPoBzRkrNm5R\r\nAbeQV9j6PX5wU0uesxnSU/xkyUTU8vxxxN+ZDnBJ2vrPE+7HPadTxGnoTdag\r\nBzHf9oooHbSnpv9gUX51iSwaz0WpGxiHioKqzrp8qINySzOPHd9qV4/BiG45\r\nV+ivBETngl5urWo3yzMAZXObUlrJ9lEwzfSQvhhILVBb2MQgxdAJqmAYQRnr\r\nWPZ07nw57/z/sn9zCTrvLxxvVQ/6X7fgYyo3v5waoC/Wx0JiJeHy4AYOcTxJ\r\nBUU61gQW7d4V+2HqsfL0PKvuuAdAz4c0IUDOk8EPCLggPFYxVdAn0Amo1zwh\r\nkCySqgqW0ZhPZMWEiap0Mu0RV5hgfpJAkRZ6/VOU8viXrXGkG3V+59hFkG4x\r\nnEnIZb0DbnEVGRix6WoETsnuBA4zifXfLK8=\r\n=rBL/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1595-104.0_1652216423868_0.2652028248883689"},"_hasShrinkwrap":false},"1.0.0-canary-1778-105.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-105.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-105.0+6caf9f5","@bodiless/components":"1.0.0-canary-1778-105.0+6caf9f5","@bodiless/core":"1.0.0-canary-1778-105.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1778-105.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-105.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Zyok2oPG12loAWrPsq+k6lYdTZdxA3dFwGcE1UmX3mn8gM88sdgD70pqm8tjLNNMH6lnObcpRZYtVC46QqiwBA==","shasum":"6c66791711f548801359e58d46b54605c062e1fc","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-105.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnAPR8TQMqSOi9NrSPd8Vk6/Nf7er7ocWbQ00J8rCCOAiEAhOW5gPjUEQrVwDt+9IgRBcpLRJ9cL5k/LbJMe4CXvuI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJietOlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpqBAAhbGYyARp9pNlvYnKEs/rmtMmRNhhR+AFHYnNooBo12U/EL3C\r\njpbP942q0f8PmxGUWTBNJyy7eDZtPSMzSmMLwv9Fi7HSw/YtyfIKnGX14hPa\r\nVy3Q/zAzu9/yUYpqVPzXJhZS/i6F30plm66YHkfRIjBUqtGn2VGSrunk7RFw\r\neUGLw4yBjloWHPQDOmfdCx9w8Jm6CEmbE+WIByyubzJujgQQ902bATmStwQ4\r\nZn2jAz7vWDcDOG9cHS4+HSzixRMKUp44zf+2L5tQXQIzn/RXL3c0c5ANpa5l\r\nUOCq4qnRdA18buFOjp90nxjv8SacaXmgXSVO9HFXRt7HgEQz5UDKXyTXDqdv\r\nn7xU0N1Oo5VL1fU1lORs9SDJ3lUkr+7b/ivmUTknNvKyLHoxEU1VI/4TyQif\r\nkLpSRk6Z+sS1rwuPBM5JLJ/tQfee1PUMXWfrbvz60y1pzf3sJkiSu/YNg6Gn\r\n8qn8bDNAHvp/JUwS6ukuDVAuCJbiyyGtCfOzUa6auAFxXNAqP7oDIhBSq+4w\r\nT63/6YbXHbr0/zR/ays8UvA+cMC5r3XVbbS3BmDywENAqfOwD9m8hS+0B1v9\r\npcE68L7zxcF2BD/zJxEt9kBTdrPgoNmeIlT7w1nGl7HnySm/pZYjQLUftben\r\nsX+3JytVve6vVraxiUORFBgHU5YMB4R5SyI=\r\n=JEB4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-105.0_1652216741476_0.8786401427133197"},"_hasShrinkwrap":false},"1.0.0-canary-1683-106.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1683-106.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1683-106.0+6caf9f5","@bodiless/components":"1.0.0-canary-1683-106.0+6caf9f5","@bodiless/core":"1.0.0-canary-1683-106.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1683-106.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1683-106.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-HsbpWiLbhFQg28P8Xe8ogxokHr/1NNR2km8eMRnPs5M2DVfgOguJOuS6deKeYKgiPjkgTP2Vk1paoZa8WA7H2w==","shasum":"6d15aacd62480dc000ded8013d046c929a67fdb7","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1683-106.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAXf9ivHif6+fWYJeTFHmOILLkq+LOBwhvEAxLYrV3zFAiEApBpH4fuY9eJvGxxJOsgiXnVg9djTpSehF1iAk/4a7ec="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJietfPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmokag/+KSY9n6OsFpA6kHFSfvbiI0yO/7eSS1FmXHViB7+PezhGrmfa\r\n7Q4rbd4K2Ip6AXrnhZSJajICsKt/l6CXi/wsi9NXPkNqktB9Ze4PpzKGdC20\r\nIZrHncvIMaqIQGOgedpyebEipQZqck+R6b1UatYf3Bn+C1etYWHgkX4TkmxE\r\nCUvIS8gd9Sns8E7qxwCSzQIWhr/BApHNAWn8xiweTpnomzUdcmWhcKUE3Dxw\r\nUDpP+MdSB1Hv/oy9q3yE3r3+7sdEAuEmB2Dud9u5N07EXF2TY7CpDaePQ9Wv\r\nHhoSqokob+vUpKnmktrNtZjy7oyk6L+n27JYIjef1GH9FXxgj9sKo/y4J5kM\r\nTUu3/8ahCSo31RhvN+y3G87QUSQOXHZB8BJHLH+NuxSFaUThrbcNSdj8I+Ca\r\nDRHod0ECOuq+WlBaf2JCKMecp1X7RTa2ynoYevEkbzOT7T4/BKdZSnbl18re\r\nHoC/5UBIjrO2/wVnLXH9tvtQrlY696T3NoFOlT/AljK4fjhnDRJCO/QLS4r9\r\nPxSOXBMmuNDO71gY/Enf5/3T0nTaAKfeklCK/thSYDqNup3apu00MsJP4CEZ\r\n8aM8e7Gzg92QpXXO+J3oGAB8RJf30tZZFpsNF6/NQX5B8Len5RpOBsjbTyor\r\ndZKFmH75xXXgd/FhB5Q5aVqvaxY9uzNVAS0=\r\n=2dnR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1683-106.0_1652217807590_0.5325200886121892"},"_hasShrinkwrap":false},"1.0.0-canary-1778-107.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-107.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-107.0+6caf9f5","@bodiless/components":"1.0.0-canary-1778-107.0+6caf9f5","@bodiless/core":"1.0.0-canary-1778-107.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1778-107.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-107.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-qeQABBJMAwjN37PaR4ZCZ2lDFzjD0EngRDVQe9fQoowaFoBBYg+nBs1dxhNq+wJAFyuyhZTenVJ1JgLgA3MQiQ==","shasum":"61c34805f2c8e997f5cd6be4820ae6f25e4dd7be","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-107.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoTjZkBKBLicT9BlkaE0H6cD/ajEHJ0S5x9E2daeorBAIgTOtmfh3N566DdLCAwd4qycua4RTYzKBErA3JnkLYWlE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieuZ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrbqg/8CzlzNe5uzmsD7aSrIIz8eMqjulA6alXWuxi4b/MnsTNZg6Lt\r\ndz+lnvn82qn6LSfLkinE2yGjhQKo49iWRNkm+yvINm2Lh3rERLPIL2/Vpxif\r\nDiSdk/E78ft+GOLdoIDgsRnm9olfHhVScW0R06JcAepJ5KoOf2p44/gxE9ZG\r\n1PVEJI7iQBwYqwqnmMl62dTVVvlTUs0iuDh1fSywUpb+P5V372MX0fumGf0E\r\nSetgo3QuFU5fvSr7NRl8WVqPT12sMv/6Tv6RXGsccZ7Icb/90ayklmVzqTwO\r\nOs1lC39BqNgwSFQaIubOb3crJGCFix/zlf9l2jWlWpgvDbz3AreNJq7G7wIG\r\nTcv7reQVXRy0hcx3a7S9DGa5MEgDzUffNg98CKYRwftlVkI+OtDLYIth2ZvO\r\ndIMJn+k9dKgsTwCOxKBpOSM/87ZitM77nX2ZPphJ7pc/RHP8r6SaGs9L9ILR\r\nCNOjwBCLtk24npuHPIyYc4WY8Y9kUTzY7y72GaWmLiK68KOVnqjg5ToSm89S\r\nCnX457S+5Y58j44FGy3iGJBXEvZrMzni9BkfYDt9klKXXVbIGVq63dHUNUKO\r\nR5JLsSBaHhnbUtQ+oWOCKTi1CvRmH8arqUFtZm9IFJ3s4i3mvaxVQj3LS4SG\r\nQmfFUACSKUoC5gDIzWez0V05eMJM39PAYY4=\r\n=qaI3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-107.0_1652221567080_0.5097528540306733"},"_hasShrinkwrap":false},"1.0.0-canary-1778-108.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-108.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-108.0+6caf9f5","@bodiless/components":"1.0.0-canary-1778-108.0+6caf9f5","@bodiless/core":"1.0.0-canary-1778-108.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1778-108.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-108.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-eIZpUOu8gE9ClCCez0ST0QTnORwUviBwDSEyawhheqB+BucGLsWNaI88RmjUmrsRSbggi9qCu+hTxW/wkFMuLg==","shasum":"8c8923c5696e789b2b23da930d68e6c7cc99f6c4","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-108.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcS8Fj5mrWnY5jKCsVZ0Gb6bwf0nbaSEcs1DIoH7nWIAiEA7kBrFTZ1CeBee6/2otkyeNV8ooa/c3I8Nx3hkeICV+0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieugPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZqg//evaK0dqHFJkE9w4b9Vo9RILK3Or0ILmjDVg8fDoGhmlOWL8Z\r\nx0GPpyrmWHShFPHf7AlTvC3i5Ovc0h7dU4D0f6Zw9P5FC05GZy2Whje7aFr6\r\n2aXcEmsNNBqy4eTogb8Q58vNRQtaw4lWorYznmCVLYE4sahZYDc3YmTra7s6\r\nx5VrlsEHsqX+ztkzy9mb8V+PArF8UTC5olB275q9soNMPSs8eKPit3XIm/26\r\ne+tfghVy40/bpqJ6DiFCWpYXKljLL3xEe6D4jGEuqvbtOKfevYL7SeT082Tp\r\nyzR7XOm4dKLipwqC1evCm2Y8AwbOXEQxZxm6IvQ6bjtBXMCUWqoekam0MRRG\r\n9M7C4tbx2PvF4ln8Sj2U49dc79LWeXStAw+W7BRshwF5Y+3hSUDqmBmgF2xj\r\n2KHgi6M9/fd4niGUgtJCjGi2V93/3I6WElgidM1Bs05cH0FmPBbV+tW8tZiZ\r\n1yN+NCxt56tpGfXGO/GWTAymGt7E7Zm2drHnOb9xsLp/m0nXhKRS1GViQ6yG\r\nVpjc0+JPy0ryR6sui/F81rhHuEnRUr6R6leK3euoSgAswIZ6XNMnYL2trYiX\r\nyrOiCOdy++v83R+9uiApf4OKjQA1c9a25Jwb+1HJmwrzlxtMMYXVEaHJ5n6r\r\nlLaj1YH3HBlvwFNSTEn43SvsAggBHaz+S/M=\r\n=o9RM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-108.0_1652221966980_0.7395467384432"},"_hasShrinkwrap":false},"1.0.0-canary-1595-109.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1595-109.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1595-109.0+6caf9f5","@bodiless/components":"1.0.0-canary-1595-109.0+6caf9f5","@bodiless/core":"1.0.0-canary-1595-109.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1595-109.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1595-109.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-D2Qy9PtLtuMoIp0yLDIRTFchPZY+3yN/fIXKM+zT5xkg98Z2pRk7HXXi6kg03Q/Kj421rQnV5OO17IZHbiUDDw==","shasum":"b68c33e222217e5707a577a409e5e74b18fb4e70","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1595-109.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDw/gdp1uK+W2nhFMTu/lRnSuWK4bjRIcbVGJGgo6BnQIgGwq9pYiH+61RwNMNODT6hWlxkyDLMeVEJ58nBG6m25g="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie19pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG9w/9EsHL5Dx/Nd6deW2pEbUIncaI07gp7tRn2/D2Rqw7u+skF9+Z\r\n21Axymi4xR1c284Y4bVxFOPcT2bsO+zLVVE8iedBpOR/lY2Fb78LAWuGPHCR\r\nu5w3tZbT8qzMfM3o4HLbMphNP9dgKOhHEmcRcV3TBnNq/EnG2GgWvLqPZh/H\r\nnhSx/Le5u+JVqSMDCgzCI++LKQMn/B4Oh3mgsbIHQYXwD9v7PCTPeRUwsbXq\r\ncM50UkpOEKdJ2Q/VyJUAABAXOpnAa1URhRXsevmKRlBrkZCoe1S4IsudlfTb\r\nwJPVwCi4n3wWVsJblYTGokGBKyLg7JOrMpF7N7GvXgyqFnkRgVR7f2Z8pCBK\r\nsf7MsWPSmr8izjYvdEPF4Jqpteue5caUV7JtzarCzUE/bxWEFAZ3NVZjq5zA\r\n9BA18BDs6da1MlurwhOk+onysHT17OlnUL2VmFl8EI/AoT3jD+FZTOaVzjid\r\n8CCVPTKKGPp3k3OL27wtXwTqA76fvsB/JxdMgMXnTtfwO8Qwgckx0xBDXJll\r\n5xrjLHZsSZzpsScVZb+hal4SIO3ivVa3a7bEJnq15ugbBu+QehqsE7hcCdLM\r\n7VpqOuhE5oWqZ5SD/y7l7VHB+zCMoSk+IPY2wNzUDxmPcvWp2ZCF5pfDFPRL\r\nU0OJHVwfNBOElJa94pUKbmUDG1xgL9YBg9M=\r\n=Lkun\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1595-109.0_1652252520771_0.25412132734254844"},"_hasShrinkwrap":false},"1.0.0-canary-1671-110.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1671-110.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1671-110.0+6caf9f5","@bodiless/components":"1.0.0-canary-1671-110.0+6caf9f5","@bodiless/core":"1.0.0-canary-1671-110.0+6caf9f5","@bodiless/fclasses":"1.0.0-canary-1671-110.0+6caf9f5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6caf9f5a9c6ea09c6b87355aaff7a1b390e00f02","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1671-110.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-fUB5plXjQ3wqp4mXSsTYJochzB0YlPKWKVzyc+v+6tppogqixKxrRGSMqj6lhpVDD+I5zkutyR34e2Vy9lUmzg==","shasum":"0bbefbd3c681edcea905e3b93bde4dd7007e17e8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1671-110.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIElU/JRtmlPW0NA//qvoDDwR833aXBd37x+3b5pMantnAiEAn7HQcdEYO9MgCtriY7condDlCGDjsSJ7CCLZw2hECO8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie5F6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpy2A//eeErymcD8sWhX5W1D5pPoM1EeB0ZRlHgZoY6z+5dKEW4ei7V\r\n1L4H0oBGcmpO6lYjOKDxIaaDqqj/3CKZR5EcP47MF5XhX8SE8d41UzCsX5R1\r\n1xEvIb8CImqHTX+vjJMgJytk3Qu9UkDfQ3zdVxJXYs/itKX8RLjzEe8uHjxH\r\nwKyM7hI4pneICu02zZpTQ942MelLSywnB/iRv4JFW0UWCV/hSsZ2y5n472z/\r\nMMI26S5kLrOGOiEZIhGEjudzyl1pj86wDA6QerwdKb9VgM7i4iMMispKajz0\r\nZ0K65Tgzo/BKSiXrGjZkVk+25QA3EB68pEFtBkQ5RQENRbZXx/FPoYWS6knM\r\nTotVVs8mHYACEY6ZelN3FjD3GYOCOamOzHb2hJNdxpDH/D2KBKcC2/gK/gZ9\r\nucSqt6loLySdrjp+u2Tqp10k878SZpVFY4p1A1qm//SOySfcbubGVYBiXF/j\r\nOgeN4zsilqWWZ9vjIf6ApN+qMSKEf2zdh8afLkpIuJA2rr5+xJ5VQSyfLZxV\r\nFs/LrHzRB/I9Z0Frnw7TxsRHvfFaA/8NK5RUxHfEcMmbXB+GzYxCRqg8iCON\r\n1vM5GXWxKfZDcXoKMPzP1n6QNDuZEP+7sY5c3dJmqPnI8kyWET8ads+++bin\r\nTOQ9f37Jx+/fZxGsYaXY5fOkGAoPx5Zz8wg=\r\n=edna\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1671-110.0_1652265338210_0.22305969510854307"},"_hasShrinkwrap":false},"1.0.0-beta.16":{"name":"@bodiless/youtube","version":"1.0.0-beta.16","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.16","@bodiless/components":"^1.0.0-beta.16","@bodiless/core":"^1.0.0-beta.16","@bodiless/fclasses":"^1.0.0-beta.16","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.16","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Dfw+Oi2RWedFGpJLH0jyP5Nfnp3PRdvsvpdIYbDatsC7cZVbzwGQB7X/ddv5YvUKiUMCnX0WrGxrlENvoSSvNg==","shasum":"176cdc44bd53b42fcada6197bc1dd46233c8e60d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.16.tgz","fileCount":22,"unpackedSize":229665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6RGmvPOEjqw9fc62XH91VItIkiiQACAmF0/sqMABbWQIgKDXB0beAmW9AxlivjRj1kiTH5nI3zlfX+CVkzOIrHoY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie5ceACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+ow//UwEQD7LGxbCprNAVcNrPBqgjs84WhNg0K0viYLs+AnWDzTHW\r\nsZaQneaO+4Lrcl+cZE9oYytb/Fl5JzTMtGZ7cb+mfuSxvE1ljOISey/rcZne\r\nr0ymqrnn8inqTVkTrdeYaCD0tcceALfEP7YYKlaFPONo2Vo+buR389nkJd1N\r\nkMenia1oz5jHEqHtbJkDr4jqhvHs9+CwQ1OvAZOVCXYilgX9sf1g6OgBHa9l\r\n9vIDGH57kmXGxj/aNT6Jmk4UoLZJI+Lo7ujuP5FtQaMjUjn/+1Zma1miP9Ap\r\n4VzvCzX3V6jf4GHPYJjnBHLAvcgBH1KQP0cYENhx8g7kneOxXecP5kqTpReO\r\nD8IwKa2JKbOM+jgl/PhTUU/jtpGbXJVRPWLxuCtmlNJsjYXdeQCdVBD2ik/i\r\nYDOrFw6v9CIc6Cx9jWboRNtd1ZgcsvJAiUtwFfmw7S7/TEk4ig9y1P/vWcd8\r\nBVzV4XKIz4osMDT3XBgEEJpz3aC3uWqPFQdZmUI9ObxF+Oi73X2Tj+j2XeFy\r\n7LYVQUAZRLbPSoZzZx18WyAGJ91FyWssfaIttYA6LzZYPkP35jh2wUrJQJo1\r\nCSFMYY7eFDFspNb6lXiHcldSJBcI4a9Z7/eHQ7oMmv9G/EZX9UwJx06VMPU4\r\nYx32KkmSMCTlAp9gxuRVPTvt63Gmprk2Ww8=\r\n=gCNZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.16_1652266782536_0.7402130938972236"},"_hasShrinkwrap":false},"1.0.0-canary-1776-111.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1776-111.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1776-111.0+cd00bd8","@bodiless/components":"1.0.0-canary-1776-111.0+cd00bd8","@bodiless/core":"1.0.0-canary-1776-111.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1776-111.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1776-111.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-9T/PzFUoCjaz6RUyDr3nDUY0o3vixB3zwKippl3297kAhOzmDkTk/wlelBc0Om1L++nVWyEyMgefWx/l9/8zSw==","shasum":"094cd195f044a934ab66cd4bd9d86bee17e3766c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1776-111.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKt8Urk5sZkFdz5yIsrRCJB/qmIxTVFhnWO78/q9UqnAiAUExrCijqLU2fKGJw58D34FAsvaY/19kmI9M+CEM+mYA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie6InACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfrQ/+KvKKJAOzOqw3hsT9IYGESDAHd1MOU/wRO5Cnvhb1M8kLO4eP\r\nPdrdKtTS/6jgYHlnT/2SLMxxjy6+YfkUTBVyBtsbbpiwb0rVouLgDLrLI4SE\r\nyG1rEL4tJB/n6NlfGQFShN2So1XlItJUG3CHHoC4IGHUAFXL/weUcK91Gape\r\n8venmHpYWwgf2vAxrEpXt44CYTLdaKlnxYXxzrGMYo2gvqvVL5zTBn5M9ASN\r\ny8OdL26mh5c5QQqrHq5f+NNLGAdMvVEh87LCWTmMAHf9F5Bq4LG8dwPYlhaY\r\nnJ/LFjWZo8aV84aLFGYVct/5X8JuFskKxgoy29m1ZN5tfCgW/efAT3HDqRVo\r\nImIozgTCsGBkhLHTXredHNbVeP/XAm+nZ3Q0W8RI2ZJt8p0N/IoS78cgjvVa\r\nsMYuWRp5EVUW3/tAwgtTs5norUhEipPlX/nDhXJ3VcPMDwwam+f+gNEJBjK2\r\n3ZJ3wGNn7x6Xo2HZE37AyS4Ko61kI2T4nsr97UYuNmo0YoZc/fJ7la1KCyzM\r\npFiPemxSk8sC44c3Ie7yy8G8LKbQZ6+G6dWS4BFP/3Ki61ZS1L899yaUxmbx\r\n2qlmVUwpXZGVIEKB2oN8nfIWLDkHfBsfC5amq+IESMwUGWpluSIkhFRIhFSF\r\nBaJq59oierPZd2I+ccPk+Q1evU82ci+WVZA=\r\n=JFsb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1776-111.0_1652269607216_0.14082165525292778"},"_hasShrinkwrap":false},"1.0.0-canary-1730-112.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1730-112.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1730-112.0+cd00bd8","@bodiless/components":"1.0.0-canary-1730-112.0+cd00bd8","@bodiless/core":"1.0.0-canary-1730-112.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1730-112.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1730-112.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-FTNBRE8Hc4C2KNtCKOhZn+VTWqt7tyw77nRY0LfdueyQXhp1+svysYmkgPihaCQ9yrMJzNsXuUOYMqWc/jdl0A==","shasum":"30fa81b92d6b920884b1d4d6743753115f7e3ff3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1730-112.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEIfMPft6EVx8I420zgsH7cN8NkTFUPHlwWZm64M7SQvAiAOFNUNWDii3NoghtZafDCbqSbiXwhST594bhNXeJ8unQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie6tXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm5xAAioMaxKtkKUB5zwDkcOBlwhrirKrOb1ZWib6qCiMdqaTduxWR\r\n0I9ECAWW8K5KM8AuhOkT/xxpLtMVfZKA5BHw8vZRPCT2Ce02peuwUqaO4TJD\r\n8npp9xrY/nL2ktr/IaepEfUGIWMuN8hmPIxj9lxAXvTSDUgNOwoR0eNzex20\r\nMre6RMp5LSQCgScpaNlRED7tlp7HfuJGI4RtbqWZbuDwsw3BCDkv2fKbPIxb\r\nmBP9Eng4c+a5Jq54MeLqDnCxbkdAIQgBUrB8MXzHa+NGZHw7n3Oyh4IMtqQa\r\nKcXxCO8UH5BVvmuht/0c/Ygp2RZT89L0Ctdr4c4ncVkXec0bJuyOtWTGbw00\r\nLGed5tsil2LXpvBh28PmEecnrA2Qt/kEidd6FEnIp+yNcxNifVGAotLRYqX8\r\n4+HL+2p4cCD9nAmjGoQ/08BtHokWohBpOevUk9IT6PlQgDvWDkpJ7ccJyn0t\r\n6nf8+fDe1xC4LnkTrY7xzoiUVpC5HRKzlMOgM1es1mj7VSdyhAa8JPfW8pFd\r\nQpOUGoqC2VpQWDKd+TdScA7Hud4EKujfK3zhVf2rU3TlIDVv9v6LTPVirlLW\r\nyoawwBtmCKdDtIxe74DKa0KQBCcvX7GyvY+pIJrux/j5uWiQbX9QYW5I7PBz\r\npeH0uYMQv3o/9V2dLa7os0/Ddj/PVJBtRBg=\r\n=jSW8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1730-112.0_1652271959579_0.24151288199372"},"_hasShrinkwrap":false},"1.0.0-canary-1635-113.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1635-113.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1635-113.0+cd00bd8","@bodiless/components":"1.0.0-canary-1635-113.0+cd00bd8","@bodiless/core":"1.0.0-canary-1635-113.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1635-113.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1635-113.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-MsQO3AkeZNpTji6Iq1oOa7M4Q8LcanxnpAsniVtmNOKKrekZl9UHsv11x/CUGkeFZihUza00r70ZpRb5dFM0hw==","shasum":"f4e0a2cb334e2a69c5a5cea3ab2d8bce992b38d1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1635-113.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwPkMPDqfdmDSPwAa13IDuZso8bcYf1rs+UILwohUWUAiEAucqbsFhEbZhc78QN7EiqC19AftQ9GGmDqzknbj8BUAk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie6uIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyrBAAj1X/Xm+4pEz+BQbDerk8HIpRJwlelXKu/LG7KufaBrOHZhCc\r\nBTfYJ8w69jzZiavfmpxnFrTUHP7kIFrK2hEa9NrVAAzIvUqRLozJkARznaQu\r\nBH9MVhw4WwpzWd9vDDJTA2CoysICM3ekbaxtkRUK0qSkPO45IfNX7h8oF6CH\r\nn3a55uiAb9r250A1bYfbYnd7koWfyE3pQgPIUiMLCtAtDgZjniei4sZZmfNd\r\nDiktvo6cdLpwFoVdcxQJqQhUjk6Qtfa3oOd0iuGAaq8C4KnsMHHmalYIfWgU\r\nEcuUclXM+D/hLFeLpkE362j9sBpp4S7ZX3KFv4zjYsXlRLqI9mOcma3RkqPA\r\nEghgiu01BXVtypzhbfVBynTP0n672QNQsgVLtHBVSZo+IFudw9QRwjaonSUM\r\nWOa5rhmFkOBoRceji8r7YSntCnEcUcpsumiE978J44o3q3VjVY903PIRV6Ii\r\n7BarFmWp8+JZHsuNcJ+HfbU9gRqLKnQJfjwrQsMcZU+JROFtY2qcGyzKHes+\r\nWFk6HVP6VUSUvvYa/vkVkvsmhyIGHYlKoPQAmv6U7OinQf29ScTtcF1zqE9Q\r\nFYsLvU9PnhPqno8QpCKfH1VD+csRCAnkCjKxrYivXZTZyj24hllz9eLB8t5Q\r\n0tybKS1fSrbj4+wCIoL/CtaJj2XPQGL29iY=\r\n=CIaO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1635-113.0_1652272007928_0.052288961245849475"},"_hasShrinkwrap":false},"1.0.0-canary-1487-114.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-114.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-114.0+cd00bd8","@bodiless/components":"1.0.0-canary-1487-114.0+cd00bd8","@bodiless/core":"1.0.0-canary-1487-114.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1487-114.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-114.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-1/dL96gZwrwy3zW7b0g71TvpU1+O6Y2aEz5GChG7s4c+whpdx6x9d/AlqbuLeFjOY7LEcMelfosiG1GaPMDXoA==","shasum":"78ee2f6c062ecbeafbbc75127231c866f42985ef","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-114.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDpqtJRD3MHyA9zB49Y6THvXjNsVqf5BHjVIBvYPUipNAiA846xW2GgEdrJcRUcJzlmDbbtG6Gpl9RlfYzqBRuWDKw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie60KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe9BAAgL1UxFSGzL5XdMtFohV+HzFDSay7IjkGzM2jpKwmLgaJPtqP\r\njAR2XVe0yakQy4ShQ6ShU/5/pg4L19YUboDb7Q90yfzOonhaQbviRCUIfjSr\r\nY/gJmilAl/ylrrFVUw7NjV3vHbOzyijy8Ww4JBL2tKV6a/iNkZsCXyW0ePDV\r\nJHcwPhIZe7v4k23fZ7CesDMJb/Xwsly6Mul4Gi+kEd6Q62SoTd/IL+yg1yjn\r\nkD/gH67jAx8ATyIuPqSQ6ff0bbMZnKtxih5wLqloWB/FEBHgKOL+X2G5SktD\r\nMQo9QOALjfm6ubZ59UcBudJZ99HtO1xZcoQQlSg1zc95ixkELmfR3kM6L48L\r\nBm0wsP3xMjDdxPQ9E28JqSJmUqws1Pjup5aFglkRPIt+0tNfoXYXTncRzN/Z\r\nYt3+VHKDiLxMeN5q1eN9Xxc2PNBdHJxLdAiuK0E3KOI/tc21vaIy9v9t3n8u\r\nFSzAELk/Kvv23MPUKnwKG4og1dysUYvfABfM982fj2wQZ4EgyhZzd1Hi2laA\r\nyo6osMvtd9kTS5HkWB5EP/Kn8RdzcbuARzfCjA6h85QeDDg7cb9rmepkP2mP\r\nxC/tFnyUUt2LD23K/uBXVW9FwxdXl4R1TIipzyD7BqQWHnlQLUdd3Ry6HV2m\r\nu18ojk9ACsgClITAAK3CeJju+sjcTM+ylvQ=\r\n=ntU+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-114.0_1652272394507_0.9535423750575021"},"_hasShrinkwrap":false},"1.0.0-canary-1635-115.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1635-115.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1635-115.0+cd00bd8","@bodiless/components":"1.0.0-canary-1635-115.0+cd00bd8","@bodiless/core":"1.0.0-canary-1635-115.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1635-115.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1635-115.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xKDsRqQ+GA8esp5bKr3d5jUnHqZCqe1NV89HkD7tTrMKCLIQ6fVq3O8+0CsFy9t3X1NZ85FqzS3uQbDKe5WwTQ==","shasum":"6e6196043b702bd4818f73c71e2f661771399cc1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1635-115.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+f+EyXRSmu33Axm6XFpPTZHq7JJrQ/bLsLRxeE2aaYQIhAMFrX1cdnuErLKyYU5GSOhtrxo1wM0qi/kFW6gsDgOHg"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie7L1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomwQ/9Gu/zWWPagDBe1JhZLH2npNLOnxkFAYk2itBmbtXT47tPqzir\r\nw1zC5u58PRNmmdfJ+n7X8gdUeapnCEB62ykd8M3zKxKVlDFclerLHRQrTlpT\r\n0aKpkx/u7CzF4EpKQlVq2cRGEWPCdXniUj9FlrSOowR8MSJVmYZvdfhsbFuT\r\nCD4YHQyXP8wqCc4X/oDnhwSIPVKDtipFKS2wVtjf2UcV/p3VizEjIlm11aXZ\r\n3dv9Y64shWaJ5UdJ76QGyJIBDky/L5KiPd9OqkhR/ZW/xKwyZqSqD390Oyu9\r\nTYPZtxNN2nktCZuM4qoQ6E++hj7MvI+3P3CTDygILwsr9taduG9nDsGpNHjE\r\n5HbKcVOQjVQo8Cfe9OqRSJRdlc4hvPoL+CyH3ZFLaXMjXjKiyezEeTxYeiZW\r\n1eowurg96oVoAybJP9M8pOcxZttnANmDJartI21gMQOvvE0v/Sp72zzmBM+M\r\ny2Zb7GhUythedIe7dPQ+2DjK7oErlEC5EkWGtZebgdNYg41fpnMwIPvrUkSD\r\nhJVzuA9hDsSg+S2tlL1+8ywHDZ83iZt/PinrRH7KF1u4vn90H2CTVo28OOH/\r\nl1Ksl1dyK+y/HJ4HIS1/bq749VWrTS0SxmL+0VsxGJRSK/hsFeLyFbKEERGx\r\na3cfo7NkbWevyU37vQh1Pi4SVEjwz0PCcPE=\r\n=aEUv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1635-115.0_1652273908778_0.09530898199716509"},"_hasShrinkwrap":false},"1.0.0-canary-1683-116.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1683-116.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1683-116.0+cd00bd8","@bodiless/components":"1.0.0-canary-1683-116.0+cd00bd8","@bodiless/core":"1.0.0-canary-1683-116.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1683-116.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1683-116.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-beVUpc6rop+gmMJ55PFbEgV009ShD5JQUDqrOfPL1+G9F5QslhGPu5CkXJBBxz5CZEKOro5b6zIA1y1ti0XKrQ==","shasum":"7bfccb5278283b430043d4507770734c14121a49","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1683-116.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZGwLGGgMFz7HWGdOxbwK/p3K+A8ybPk+SORXvJCm1jAiEA8cT8qIEY54oqsQh6X/rOiWZ3Vko89fDXBe8w0BweLiA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie7PnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMdw/+Ne9fh6l2lFwakMeo1hZmfFLLq4n6VqBlD5u7vdi+Jy2/Jlal\r\nOw6AfTC2HXTGASVBPEzHtL7Viy149d+WvUyAsc2zTEjL6DHbSCpmQ8PiI7xP\r\nk4eSP2ZrrawPtJQThPIrWyEWqsczPjxjx7X7QkKpTSDjojwET/QLMjJh15FY\r\nCUdqBDMlYgVia487vdU1HkxAFpCVPflLoSm/c4odJ2zln7+kyipp5ybr7hqh\r\nlvLvfzXkWEaq+cPqi9yW7+Vm5rzEcPmdRMkclsAHZ/cAInUCgVsfnc0Cq56O\r\nEP+khABdiZlPNlcV9Przhm+R/Mvlhddj+YaTl/9CYzcHOyvzadzTltVxpCkf\r\nzLzyKF4Zlxb8YYqWiKpmc0+U/pWbmEs3G2XHMpncz2ESQLFNn5zlXCDCj0j2\r\nb0fghN+85aKFgWTjFuIAToVIW/8PdOg/Zn1MmLuELk6o06FKWx960QgZjt+/\r\njgJ3CSrcglMlAdgivNwGUEIVS5TP2Cj3vYCAFZWr3r5dRycv6j8b3R+3nWno\r\nF83fazySYulpyV/cMF0NzTbqCL59SBB8R8tyfg+I8GlxuAltd8EU/q9gmuq5\r\nRjMp++hb+Jm5liPHJyWbT2zEVX6oLFG59plvN8y1RlZZJmQzijTmzs2mVL8M\r\nvcN8aeLkogOXxFx7W865oeBU5WM4hhur2cE=\r\n=OJQy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1683-116.0_1652274150873_0.3888353262614874"},"_hasShrinkwrap":false},"1.0.0-canary-1635-117.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1635-117.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1635-117.0+cd00bd8","@bodiless/components":"1.0.0-canary-1635-117.0+cd00bd8","@bodiless/core":"1.0.0-canary-1635-117.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1635-117.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1635-117.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-oMF+TQ2Z9k9ndMhPPV0MROIKt9zExCIIxmA+I29+aDuiF/tAIXRWX+kRisxHQJU/GJgYixg4sQ5xQSbW4fNMDQ==","shasum":"8feac710a98da50edb33776666e2f2b4feb1a7eb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1635-117.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFydeym1L2ARY17XZTwmPRDIPn3I82xuO3U3K6tiPUbQAiEAtKxtCzjecCogHRV87TR+eSofahZ3nvs5kf8rDrkQXYs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie7SnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVfg/+IWYzqSKyYOSoA/Yk3YmPyofH3HVbzKMTPoGW9v2SQX7/rddy\r\n9hbx6/b8tvTECvIy5we0ym90qpoNjcVTEMpvT0UPNYT7Z+u/YTd+lSE7bdGz\r\nikG+kjd2pjIxSdtTjg5NU90EeO/yRR9MejB0cIKOmcrCdy5Fo3GgbDYqSgj8\r\n+5XbCjcUO2TWpr7fJpeWvT/R8rDBnHvodjorEIC+iCtSHy2VCtPOGZvaQ+0b\r\naymW31TiaGvQtrujqYf5SZsBg0kYjXcqtcNFMAxxsJl574IpNJ+t/fP/tr/P\r\nR+MHFEmuxQFSXzRnZoMRz1+gLbT35q80KVkdNPEmFxNHipYcxsfAjMrg4vpb\r\n1+oEfN1odG+JE50ZpzvMvvslFa/tNS+9FWJXQ1aCwXzR+Sibf+8X78tbsM1t\r\na7HhtnsmVhCIkOmHkcpnBhuedezVQtAg1ycephLlWm6oXn4hKpnAcWCWEaJW\r\nD0QwEz/lZ4aN33YEUNDotMvyHZqNYCOMABdtqgnsYG7Prn+6RgNToLafgoIL\r\nCQ4dPC+/wWRfJpZYROggTNEUkfQRgNJWt4gdyARA6fmqLwW8SEoRAsYIGUfG\r\nd/SzAS05LGoPg+dgPQgu2LnUV2q2jj3Q1v/JMRqvqEtzAwN6XFHpUIaQlQvv\r\n16gN8jr44rSMNXag4/nBhjHzP2qDDyf28JM=\r\n=9VRD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1635-117.0_1652274343221_0.9035284691556058"},"_hasShrinkwrap":false},"1.0.0-canary-1774-118.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1774-118.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1774-118.0+cd00bd8","@bodiless/components":"1.0.0-canary-1774-118.0+cd00bd8","@bodiless/core":"1.0.0-canary-1774-118.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1774-118.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1774-118.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ba8GddZZNL+hhqhtlnI0DpRBCyWD5V3d0a0yb+ryvcx2cY/LalGatXm6YA+nbg6H83TGLQP3oKMjGWdFHjc61A==","shasum":"5a46010e4973ac95497519be7c0a9b8a2ca5d7a0","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1774-118.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC555RJ30lZIeuMXo8jWkRfBZ5fC5I6D7AagB/dtsk4KwIhAK2YpOY+Sr5W+3pFuslVV6/yDSPEOZZ4nHEuK9TTv55V"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie7exACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUZA/+PDCZXwfM8Gat2vjVc5mlxOgBUZEWJ5CsrClemw6goIAMrkAI\r\nR4TQuyQa1boSRKz6cEFhJaV6l4kFas0jSP8lKDZqnzdLDLlqfHjTjLKBUu9p\r\nWm6xop9YV/JNPgJRu5FrpeVjvn88yw1ntTHfCPuvYeRYKnS2d1V3+BtcOnFi\r\nX211+lBARIH+ARxv4c/kAs+Ec5bKAWj1zCdSomuuLErZ/0VPJLkWxIEDW/+V\r\nvLHt2BGKENjIMTEWFUlTOPSVn1ZFhpqgJmL3AJNkBTnodV3Iyqbz5qZH3W2J\r\nf7WKameZnNP4e5KjYQWeUn3MN7e1k4bPcAvykIM8DEodPLSWsYn8LreqScQN\r\nY6LjDWco1kbw9dMI+mCQ+f1elHdP6u1OIdBfktTZKrXQANnk1zo4EpyiaQPV\r\nQOWB/Th5m/36mP0dhSKiXbdAqwbh8UHzr9vc4VsMwJUc/0PU87EyXmFNFhpe\r\ne2WX7HvUMI3zj8ctZxSaVc9zkN3imP6hv3QiNSOXSApVtT9fOvNlyXPTaRHV\r\nQhsUH3t7rEL2t4Nx9WOLRokaAFDzb3flR95lJt50vthDfJ7Lzc6yt8BdTfO+\r\nWeVfJMGn5t3zZa09GU6OcJ9CvPX++onuVaQdCbeUpLSP3XgEdAcR2p6TqKyv\r\nY/nQtqoNQhhfCZG+TtGu0/9DlNG6RXXcV3Q=\r\n=3HvO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1774-118.0_1652275121576_0.5688699513518267"},"_hasShrinkwrap":false},"1.0.0-canary-1671-119.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1671-119.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1671-119.0+cd00bd8","@bodiless/components":"1.0.0-canary-1671-119.0+cd00bd8","@bodiless/core":"1.0.0-canary-1671-119.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1671-119.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1671-119.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-A6CU4cJJpsSi+scwX/AocYAPcJdD5RL4f7CgGDJkk10+fZWmWppyN55GcDovxlu3ntzY1hCz6yf7rg+CsNfSQQ==","shasum":"29c145d2157e27d46ab350dd7fc0dd7372d5f3cb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1671-119.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3TN9ojF2e3kIHmBC3rCpRa/hYgw2hbwlIbnI+tPaaDAiB/PkopknB3cKAul8jrF4GxQuJkjOtmnvdsRWQwA9IZEw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie7pyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMKRAAgPcr7ESgFCEXL03/M4w71BXw+M88vxPZD6HDrffK0Z2JjjXh\r\nZU2FGB2h1V7cboScOIxCQdgYztCTJgCm1RgkekJ48Nqc7NS515b4DF2V3Ory\r\n+vG7dheGYoyL/rw2e2B1LyX375MyMO1YTu9Vbmss96a5GLHS93y2R7dcbJIJ\r\nUP+ziDkgytr4IAOgPTYUPycKYNri5avtNYVUVIYPU7UsL7mbsJintn/VdTDf\r\nLnbi69sHQau12n07ppFECNvORUfyVhoib8gLL9zynaE7s2LoulQGiH7RbgXW\r\nyH1IY8+Eug4dYng93SrukHPQX/4GxDCR1LR6INkX8VaaEhA0+4P5qWfuxSwj\r\n4ArsFmYouQ3wnYtK2dWshvm8XLJ7lsbg/DTJaKbNgcT+pfpG1eNwiMi3Q8aZ\r\nAAeZ5bioyViIgatx9E9oxPvYtHtEAvvN9N+/qU5eG+zW/Rj6uvfxwhSkBAbl\r\n9rXI5UaDt9Kgu9S+xG0lsDef9TNlPAPnAnAxNjGdVy5GSrfNksSmxOkW/8AL\r\n9priCCgGTJiIkq3cHvu4MIX7j2jBTq8QGlI3W/+llos6uIEW+Dzt2OS+pSog\r\nSs27I2kGaVyeh9rjabqcTrMgfJremPR1kGmQ7Oh6tonGkdafSEDPN46CKpAi\r\nZ17yX0hfL8jvSIw/a8HSlNY7u9eEBQPQWDE=\r\n=7YyQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1671-119.0_1652275826593_0.6434732735922215"},"_hasShrinkwrap":false},"1.0.0-canary-1595-120.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1595-120.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1595-120.0+cd00bd8","@bodiless/components":"1.0.0-canary-1595-120.0+cd00bd8","@bodiless/core":"1.0.0-canary-1595-120.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1595-120.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1595-120.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-PEwxk7OSLrGqN0X/0uFH3IgWo3++v1rsNZjPdgND70mqMVT6sjiCJzR+ejWmFSigpbTp1Fa6MHe2/dgnxH+Hdg==","shasum":"602d9d8fbacdc671407fb2e4aa4095d521adade6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1595-120.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe/G6IbWUqu+tUS+ESzYaPJdKwTHKiIfWhsG97rINV2gIhAIaJGSOJlfPmHIrLtMWCWFp6BUxXS5xiQE4LAXDpfxzb"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie8NNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5Dw//af4uRBfc5SXHihc9IVBB8zUVj+qzFd2Rvlsip67NWIMgtfqd\r\nggmUCfgPEVXVhZx8XP6RPqEfOoio/nc1Gf0eYNL8ziYbBfyibTdT6c1nAva2\r\nfYvIorCWbVtiuobZ5kUEeUZKwTQsVSikpcR2+i+9In6nHag6Fl3bYWJ0B388\r\n5lyurJ06alD+pd5mpaiSSbjCH6x+pYLM1WDqsQovAYDOhdKI+CEENojJUcsS\r\nLw85Zil2y1gIsBvaMtrfjmsDCJ3EzCEwQaSgjJhiHUp4XNtgVxFQpitYQ7PY\r\nbidJRDkIIWi1x4iS9h4IpTwdSwValZ56UuW/k2POv9FZ91AGWdD1MEJYQFfx\r\njhOkl8ieL3B9kQCK0RFagus2qfcNgfbG77gfvPp3XmBZvwLjh9akheOTJQcD\r\ngUo0rgfas9YVyLKaliPNDFdUVRrw2VDpBImCE0lMAKOA8PeQfS8bV6YZUEhW\r\nxbMrazbE0rI0YsOtHfIR2t9pdPwveltHenybnDSmOz1EMS3Y44LqyGpeTvuY\r\nFZfLwntNlKUluMuLgdM/h0VMjQ6HVYBNuwTjyUOUQ2lCf658F14gVM4X+tqt\r\n61w5mJUTkySkaehlIx1WeW7SazVn7xKhx47+59p2A0d+Yf9QO59WTCJu+wvC\r\n+fuYNXvDan4mSPXAX6qtipGQdnCxgmXncI8=\r\n=LoRg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1595-120.0_1652278093033_0.26449927729492395"},"_hasShrinkwrap":false},"1.0.0-canary-1500-121.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1500-121.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1500-121.0+cd00bd8","@bodiless/components":"1.0.0-canary-1500-121.0+cd00bd8","@bodiless/core":"1.0.0-canary-1500-121.0+cd00bd8","@bodiless/fclasses":"1.0.0-canary-1500-121.0+cd00bd8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd00bd8f8bff1473172423f21b0b1b0d1ee86a64","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1500-121.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-IIFzoLL3aPa7iSeJ5047QkaY2F9qtxpgu4S5xZQMKmgMWbtzUoutj1YCUWlX0OLqO5A/XGXCW4Dm/CMV/coDRA==","shasum":"f80829983c8942d0aaf77e064c63288c75442c21","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1500-121.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDefft1PD3+CzhFIZ/bawiN4xRdfhfrIOltVtu/sSLMpQIhAL2fyLTksipSLB3Md/uONJ2EMdr0TbwRcXlxVquMm80i"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie8uqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiTA//eQ1JLdWyVzXz2fqFauPOIl+YfgRww9HHg5toMvdkXASu/5OK\r\nWX+n6URdxs/Jn76/+/Clrhj1RH96qR7SHlZvnFZeZB7jogfzdfGk1V02RSHj\r\n+tJT9i9qiIUypkMNwnbeRZh9DY2bmXele2spenwRsN9fowy088K2dF6ExnQP\r\neyTX7nU+LJiEpGC1Mb9tRPk81MG+On9b+QTz4Xo+aEoxeHQB6Uv/N/+0opdW\r\nxzdv6BXIyyVd9aCILhfbOndFQW8IOz7X+4RsHwJq6BCtXfVcZtowq3U2Rf2K\r\nxqysL5vVuS2ullrUxSmOZkdu8ubsc5E6df6n4CKw/NF3aIRd3Edk/CBWA3yR\r\nwoA8Y5m4tt5YVpb14fZVRtJNj/MPLTVCbbFqO4ajxK+D4w6OEa9zlkXQoIWA\r\nNEX6xTPZVuzGVpX6ea0KOHjzY61Wcc1WiF88fRv8W52Jp1v1eX8lkS1VgcCd\r\n5u8ftmXQWorXNgoqLUzSzABXQ69Jjr8wLTbrUqkV7e5Af79JiAyCf8BpIFtv\r\nCujaO19decp5txyU+dADIwZZ/fGAE0KyY84+UMFXnrLEaMHkFTMWlDtu+F1m\r\nPAgF8c+jUvpzESlmZjHp/pzc1mGZ672jl5SKWI975MX0jUGeFx3yXtqkNsxs\r\n3GD9HVVVdqmtYvVVFOfdA42T94n77zt14c4=\r\n=AsTk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1500-121.0_1652280234364_0.6478960074179776"},"_hasShrinkwrap":false},"1.0.0-beta.17":{"name":"@bodiless/youtube","version":"1.0.0-beta.17","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.17","@bodiless/components":"^1.0.0-beta.17","@bodiless/core":"^1.0.0-beta.17","@bodiless/fclasses":"^1.0.0-beta.17","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c9f48c614de353065d38805de82274d395c39639","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.17","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-LHI/dxfi+ZnikVA0OPUZeFqst22QIFmZVmxBzBhPIS2N1v7CnMrf8ZfTJBo2LMUgXhAoSYoSpZNybVKvMJntww==","shasum":"6e3927dd6c3d589b8905a347ef4d55b489a1b783","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.17.tgz","fileCount":22,"unpackedSize":229665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy6rAsGPiv0zFKdveNKrhVF0mqocnRQtnhnA0WKGc5MQIhAIsk8mXYNXso8+kTXZX5On1sZlw+lhy8OOdy9B/0vn5x"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie9emACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVLQ//UfGCSjHKxtX88i80/qJxLK23MQeLgd99LqFp9+BZDgiSLIzm\r\nZzhlraSbK/MbiDt6N73yolLXgCbf6OYywKxUbWG2K4Hc2v0amj1+/0NH5Rpc\r\nB9kfzIg5oUf6lirqtmPkVeqlkldi4vWNq2InwiQfpQfbvSyjUEs/g1OPoas9\r\nDU+nX5MfSLthErOJ5xgiC4nw9QDShEeP9mFKTYe4Kx5++svLMMCiyx5IpF4+\r\neOE4yDcaexy4Gs1eaaFXoiMRNAK4dR6LvFvoNRn7XP0e9wIkwJckHciS6zh9\r\n6oQO88+ETIc19/Zk2X/RxSpsTOf1D/GOqEdKK3fNj4eVOhif407SuqSd7nJF\r\nit7zwE7c+NWm/v7KJfQYmLkRsaj+gA1I33WNkExJNaHEKiDQyd30n5MKuL9Z\r\nYneF2Gxbr1i+fCEGUC01m0PXeP9X8coIV2FYQdPfECMkE6zT7QYZQFSk79cV\r\nDPu1oBnFDfZTqRUuFUknsWija9LszUctWx/EN7RXm/qUawJ1KmsOSCmLTkA2\r\ntQ337IkteDu2ZcmQ8K+Ub8DtMHb+Kk1IYuLIpWTFJOYwJURJ8taCqJofFaWT\r\n4eEjSnXYxfd6kXf3d03fwz/57aTtMOo94u3P2l1x7c3AguexaZEh/veOt+Yv\r\nkOqOqpf01YNGI6RGKE3BaEoLtvL9C7/oik8=\r\n=U4zo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.17_1652283302265_0.4780161064357944"},"_hasShrinkwrap":false},"1.0.0-canary-1685-122.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1685-122.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1685-122.0+c9f48c6","@bodiless/components":"1.0.0-canary-1685-122.0+c9f48c6","@bodiless/core":"1.0.0-canary-1685-122.0+c9f48c6","@bodiless/fclasses":"1.0.0-canary-1685-122.0+c9f48c6","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c9f48c614de353065d38805de82274d395c39639","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1685-122.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-y9FZ1ECa5C9FRd+nfIKRJo6JUyciRyOLmWHwOMo705CbvnONKqStZe2WshL3C4MHIRHZALzsVOFq+DXNQ/jT8w==","shasum":"eb956af6b0852f75756d4ed1ad9404c28b1a0777","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1685-122.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8F+X+83K2SNF7jYdGnUsW3u0sHFD38np3BIXjuDiyWQIhAKKWrnnOol5Pp0k/q9hcHdTtqlOmxorKFrCOW9ZCrh9q"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie+GQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq81A/+KVKsEuYRh4K8dOPcwi1+lGg7voSZxWQejD5MO1Fk/GIzMdQk\r\nNNcUDvPxazm/0YitbA/bz16svWw0Ynr5vu5e7gowuGzbnqxnrlV6+mLibj1m\r\nSkqRCojGIYum9BPPfAfjLqeTSSOh3kGuZCoysEvZkt/dE/Qc2wNuwl2G9h4c\r\nCTJBOK6socUyNSPLVv2VHohVki7a33UJjJVHyJETQ1eSA/xb/yNZ6bY9TOgU\r\nTjb2yRgVs0X+MZNX4iLck5MyDSdnBX0rcowGABnFCaR4nR10JpYZidJPI/U7\r\npzoT+PPxdGcQ/T+5ezV+AgY0m0ASeYolUEX5u/WwHng2nLzTjUgMCOpWclaN\r\nbWP0x4iPZGlUJXjAmwAMeEtKMLyIi3O6jjTrwcZmZsVZmsQb/V1nfuuNOVrp\r\n6f/mUiTFIC0mC08ipL5Rpy03jY8ewLegSjCybrD8j+hSQpM+C2LXAJiGYV+z\r\noW0xuTFE2TwSkyY8TMb6dSXzI8sX5ab/wrEh6w4eDrBiEzo9Ythe5uhHT1jc\r\nUOxyaeADsjmAZQ9d60qC0tbBMabuxgvWP8cc3ebgaoGLS5N45lghzTJrswKO\r\nMeIPnCu8FjM0ZhjX5Otlrsg7NTCKbIoTT300vxOFM1r0hpugfgLg48Ka9nve\r\nu2pjgm+dZobNVdVttFx1uJotXjrKIfa3p60=\r\n=p5j5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1685-122.0_1652285840613_0.37108441502680867"},"_hasShrinkwrap":false},"1.0.0-beta.18":{"name":"@bodiless/youtube","version":"1.0.0-beta.18","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-beta.18","@bodiless/components":"^1.0.0-beta.18","@bodiless/core":"^1.0.0-beta.18","@bodiless/fclasses":"^1.0.0-beta.18","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-beta.18","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-qUBhQAQglhEJFLvYn/yvN5RwhgY3ES/V9iYiQ5Z5NwDbhdb+XN/aUL3m+cn13ooaZvYRrNQ4xWHDWyMe7vbVWg==","shasum":"1218f221c43ce89fe79e3db883c8cfc1bfdbf119","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-beta.18.tgz","fileCount":22,"unpackedSize":229665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAyOtedDXqzdRGnf3duxn8Kx79Yj28m9uNUKbFGwwjthAiB+KTso7ExZepZxQEY0r2wCfRIbc+gT/Khvu/1/QuE1ng=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie+aPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsZA//QiFc6CujMVfAtAyHN/dCeUeUfnCOA77jzTTvolVItrutVQfv\r\nBOuSJigkqBCZ4Z2W4nCOCxBiyZ9wybQmUu3XHcBHX+0QFgjfC0r7rtj1fLK2\r\ncqifCyObHM6Q2SdNvyqIvHX12dss2PsNcWvab81DWybTWTMlOYZ8ryVTwJ9D\r\n5na+2Sggib3G/A6PGAXc6nZBsZgAB1F+ANur3DMp1i8roGU12cPBKoMA98hi\r\ndzLcAeLHae5tgPHJZicbdJpX2qsMiJNc7wXA5+DQxgTR1r8QaiYpTbhru6ud\r\neVNrz1EHNmWuNMCiyeIIKtP6vCuxEAp//JLFd63Gpmd038Bug6BTW5D4uE0A\r\n7d9uHuZJaCB5kHHT3TMVjmhJviv9sgdO5oVv+rvwJSXhI2rmjJ9UaOXEPcqp\r\n+sCdvrCVO5gSSJXKRAMdH0ZKvXdbhYhDvDyZLQWgh0hJxvBXWvNK+W4B/gT7\r\n1fMyYCwO61taDezFXMykN0LOxqp5N0Fu0qp7wlHYAMUoGsFYx94/xXQEFiyv\r\nkmH+pQFZNRZSp/Lc7b+hhhmkPdbj69Mq4ZrzTfPlGQ6MyLIBApocazElJqMU\r\nynRAvVvxpY6B/Ulwypsu9F7nXbSfK+DuBKiyab4AN9gjUNfdPh2EFj4+BT+B\r\nWwkeIRSjxck8u5bzXryqsfsd4q24w1W9iQU=\r\n=KuTd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-beta.18_1652287118745_0.26501907649961787"},"_hasShrinkwrap":false},"1.0.0-canary-1778-123.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-123.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-123.0+7ec0257","@bodiless/components":"1.0.0-canary-1778-123.0+7ec0257","@bodiless/core":"1.0.0-canary-1778-123.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1778-123.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-123.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-FuC790cq5K3WV4C+HR5RCFVaNGRNwhCocf2Btgy2DEzVh96WsJffxaHRYTRuhaywVvc9UjL3PTGj3IRImWAfxw==","shasum":"90a5ba1bfed097c4f571c3782369ebe507dd951f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-123.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuPQirrERM5RzHCUiGyhnhmy4fXK4or4yjwyUnkQREiAiA8G4PWhe28rSrMOg70mg6C5Ls/cvvGUdpUXRGa61jE3w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie+w1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXGg/+KKCq4S+2PLCFis0HW2wZsOvySy5AZx4S+gOMEsMzY5n4pT30\r\nYUnwiiLAB1kUIbPJaUhYJvorIp5xmln3R3yp/odr9gyK6Bv3rIaLE7o4kqQN\r\nT7O9MVeAoHG1OmV5f7unBlDRuC0waIMiV46iLmvBOtIB1sB9hps1hiZ0aeD3\r\nCCQi8QuHAkUX4yNbWm0UmLS+UuTT9avkcj4zWUiuPncxBi7DgqbnyjkIro3v\r\nxwnCS8IEVDj6TeTeAv+am9oVFhTTg7KXq09vcKye8ONmfuL+EozX4FK0XYLu\r\nwhGERYIXSiSrrcqdo+cQaIBSr7SCdprLfwPr4p/r263Y0jA23wSuCf6hqSzA\r\nicQnf4vcuFQfb5TqkC0NcYA8s9VKlHbH6QU3opTGkUWCV/OZe5Tt2J6ZJhsc\r\n5/Hd4KyHdZfLl1GgiDfccvdvZtoh8cpszLSgVyA4LlwJ0u5RUxDbdxNr1DgV\r\n7s8zblzk99VfpjVYKWq+35y7M+Ntu3yzOUKtJ/65qPi9m0k+FyPg9H75gRWp\r\nmZ9+oq2hghVPzHjv79aS3uwZv6oEsqIBnPPjQ9qDn2WrNTXLbJ1SY3sQFcTt\r\npjqGKk6iRVCtgJ6BYNDWcf/GTLEZhKN4b0W+qtRXQyPoy43O8lLVG61SuCGU\r\nyl+/VHdiL/mLGZ4rRs7wlnG1RF16gu8UiA4=\r\n=PStx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-123.0_1652288565254_0.6846644863788707"},"_hasShrinkwrap":false},"1.0.0-canary-1730-124.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1730-124.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1730-124.0+7ec0257","@bodiless/components":"1.0.0-canary-1730-124.0+7ec0257","@bodiless/core":"1.0.0-canary-1730-124.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1730-124.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1730-124.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-JLwy0MA8WKhas6SNO1WtSm7n2SQLSOO6wGto5+E/Mixp3EVYYZUUUd/EUgyzae5fBJXaFc5D+saYqIbMIJDjPQ==","shasum":"293247a852f54f88f8c694cf580f129798d0ebef","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1730-124.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3SFHSkMi49l0aemoUCg4HP/qTGZ/tAXLx/zfQBrTbLAIhAOxfFzMlY2QqHACtt2S2qeWgvflEsD7Dp+Ez60jU0QXk"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie/DYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA1w//TszV9s+kZQ+k1RK4+HTdhxdRKW+BX1VRyhE76fxsHSBf/Zva\r\nNBcW+4s5wlhWN71tUWw1X+26xbgzRkoBWdoaDVkGKkCWXbrUpUjLJaLHk+sX\r\nQYy7FJiJe/n0RhPCKpQXBNHdDzsJFID65zZ7uh+xni/kPMnSa0OadgJmtva1\r\ni5iFLS5PpS+lgwr33p0E04i6G0aYwgM9ymPk/Q0clBFK7DR8Jg0x9e1alFeP\r\nM1pwF1fwL23Ngs1S8bKx9wAx/aVofo3Y6rBk6FivFuvwpC8DySilrU+mi1O4\r\nB/W9Nu+qzC8X2EPKrn1S7amnIFTf+XK9JGezbTlQoFamb5HKQGD4ea/MiBjC\r\nBs1EjCBMMqIcDFcXqqEeUWAbdzVDVZvMSUzSuY5xqxVHUQcYM5Jvj76V2LM3\r\ng/38y+F/ePNj+cWf6quIo3/uJL7dpCZBbyIXQc02lncZEdFcZ3YKklVveYDx\r\nUx+RawmEPEpVR+5wVUFRXnXFUSKp4XWm61m4N9B8V9Al9+rGROmEXBXcfVvO\r\n40H9ZYJb+6aZ3mMYb+tyNV8W6Fsw6iAZ+4XSz7YCqq+SRPpw78NzHz2RQzY6\r\nPPy/KRJTdgpx/b56o7tW9fGzD6D+CFadcd0TDLshRr6ucmgS/MBrmng1cp8e\r\n6qzXbZw+L8vbla67usHjsqYBbAaA43gCOdY=\r\n=uqQU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1730-124.0_1652289752705_0.3099550682722001"},"_hasShrinkwrap":false},"1.0.0-canary-1778-125.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-125.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-125.0+7ec0257","@bodiless/components":"1.0.0-canary-1778-125.0+7ec0257","@bodiless/core":"1.0.0-canary-1778-125.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1778-125.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-125.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-0bRyCKoG/ntnE8+ET2ylptVBdsN14vaIkGGXKyJlBjRIrHODlcR4CQaC9IfLIcxNLD6w05JwLklryCEZ3tUFLA==","shasum":"72544d172ea711d43beb9f9b162ac481498c8fed","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-125.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhdq8o1iUK78EkIbsOJvMj85Di91Zr+Uhcs/t0mBzwTAiEA1c7EodoJNT5zbcr+Y+09S6mWZOPlZGH6HPu0HTKgJe4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie/GmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXGRAAoP3G7xp+d0+HDfhbvkXsxmkZ5zlwt+fw9sYHq0c9YI/OcZcZ\r\npJ0CUXJpPK+avIDWuUdunKSjpZZ/AHYSBpK8lkmpJeikZSSCRyL7giJwuFKV\r\nBkKT/QvPWUuwcFkfE7SH2hd/PvcuFzagIc2cJVslV00sCwOMKDSxkBzYUCSO\r\nZtKC6tJXmFdn6iNzo51RAi+Wa4m6Ij7t2MV8g+Qv696A0aXNEjCeIpYl1gMZ\r\n4Acymr4NkbOY42Hne6IADjr64TnUJryRvmm2seQNQ/QGCPT29omchLnwams6\r\nLn9zhDgUpISVy53f3/UxhAQ3xmPVWKFXwgPISutUb01RITfLqHHYMwk0BnfV\r\nMyF+Li1jHa+8CKBnUOxPwIy7eH8a9I1oWK1/adqwIT7pOSrmCWgbyLtWCyWN\r\n44ukhNAf+37fYWl2oaZtfaqQPjBBcAh14fSrMlR2Shg2l7F8rvDRI6wjA98X\r\nxIkdBU1lG4vuSzhWVoI34RkTTjBr5hJM6pfYPU5dXVKRi+w0Mdh8jsbZ6OmI\r\nmAFMfURszLZMNknSca/PUWzczaseIqr9yLb4Gj4Fb0FZ0dFFKZBl59xG2jLZ\r\nWjhB2sfTXBWqouShWU0yrjyD61h3ncD/VOLe0U56rOPMdxMJjgNKq8hX/A1W\r\nohHNM23doiESdpZA9ndTpnNz7/vmgyeacp4=\r\n=e/PC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-125.0_1652289958312_0.695696348887834"},"_hasShrinkwrap":false},"1.0.0-canary-1774-126.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1774-126.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1774-126.0+7ec0257","@bodiless/components":"1.0.0-canary-1774-126.0+7ec0257","@bodiless/core":"1.0.0-canary-1774-126.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1774-126.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1774-126.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-GJF3aGH7jXLmB4xBU1I0Omb7L1fDErLnvr88TNoknho7j0Xb65+dauFbORbhwzG3k2Oxqohwm35EIaJeQRCt+Q==","shasum":"a4cc2f0a8944a44a27f665c37c0d0baa907ecf4d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1774-126.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzBntL9JgvZfGh1qUbGmddLPXDKSTOEeDBiDHFzN/4NgIgeYNfqG6S2l0feUe79EW5hAwl+aRb12hn7ZVLJr8I8nQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie/rVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqczg//ewe8hKUf9SfoVrrvmW5ACu0h/RxUQ4086TN8CbVVjA7XF7SE\r\n3a6wI/CcuCKvz/sTGcK64OUVM8iIpNmwr0U+fv4qPvgE88/o3/0/3jVyUJbb\r\ng31jEWAsCFCPZHwMNtHNZ/HENfCwJDtj89cWpGnBod80ZqN8aUsY0r95X2VU\r\npETdXp9HMrPkNQKw13T0I6O/7QJ7NJjEAgFD3xqgq6deHby3xzcSHxp9xAKa\r\n73WGFmOkh+1vZhN0Ewe57jE2Iaxvh35kJKQwM2UNPYhwSGNNh0scorLXWzUN\r\nT6tQlf4sXTTJNmEzasdtZZLCccpeJe3OKwJkgv24xkL17GNTjxGKfKC1w2sQ\r\nfjKhfSdZK6+X6V9od6QWdYuGFaUIq4jt8yG65DIGeOb4FmfAQggyd0or2qST\r\nrbPiY09htOqLVxLoK9toG/dHwmmcBxDIbZMtSk2cZk3npoXHGmytHYjX3bwH\r\n4B7cZwITWKrDywsksV7GUnB/khtTKHzcd4SuGILU4dWvCc14ir392pncVqNo\r\n6mbnPUX4RTF1eJjXXzGVCikDdNHJyRgz6YzcKm7DM9EPEeCQe/gSvMtgJPA/\r\nDHsQI3GVFL/zGenar9O7pEFM7KbAP3nMSGnYeBL5bSGvtmgA9Ct8yG84yI7T\r\nTEEPCxNEUcNDCe+dcZCcg2F1eQRrx9zw7P8=\r\n=MEPI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1774-126.0_1652292309695_0.3022748654310903"},"_hasShrinkwrap":false},"1.0.0-canary-1774-127.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1774-127.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1774-127.0+7ec0257","@bodiless/components":"1.0.0-canary-1774-127.0+7ec0257","@bodiless/core":"1.0.0-canary-1774-127.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1774-127.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1774-127.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xmvFEfxjVHzKCWOilH/Z7e6FaWBkOd7IyBtluRyIPEUkgsTbTMgaPj8BZeRQV61w5CyTGdCA8kXWZ3KAwrVWdg==","shasum":"59a01c15ad55142cea5ebb4600f753cd96c118fa","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1774-127.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1VKssQRoYuQAJ/hVBJbH+CijlcZGb5GFkIv257a4eRAiBdOPBSVodOxFpCNFNR/VXHQjM4EvNwz3nL9FPenC/kJA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie/sqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXcg/+Jc8BYv18/aqEK8oFfagS3Dyrrqk9OhJIsuAW60HRcTdsGPh3\r\nwwpBqdwWphxjjJbgYy2aHBqnP6hgogw7Ns8HWhACbzrzjd/y/qkcD01o6Ml6\r\nMrs4fyjVeUBO6hTD7HYRqBE/SYNqy3U7i1HE8ajqZ7jT2KmmakR+OMJdBpnT\r\n+bLa3/cEBgfzy8IS/zO67XBC/1YmuWY9w3SLfy9zsZklII+60hQE6LFFSDhu\r\np0DOISvxY5QW7ZjfDTv+pdShAryVFMOasZ9J1EFs62+3gRbeBVTCoj2c4sWP\r\n/d06mPGhmI/OoaR9fc6OZS9rNiJr08hAv6pLsYmHX9oFTCELQb5AMhKZLKMc\r\nHdIscBPSXAE7fKd+9nXAUJDpoZJsbRs2tVWnCJ5hjpbpMmJmEsQEaou4hXJJ\r\ncFFibrYyqaGMy+TZCfSK+M7wfTiCpUmpD6NXFqzgY12JPKdPR+R48FBdVPJW\r\nJfQwFmCw/VHP+RR7y3VoQufKOmOEntS2LVC6ZHulEC7U8cBpOiK+cxPAtnKR\r\nKd4+iE+WWD44pPV2uzx6RzCnhQHy5AUAA+87xwkpY5ji28RXQyMPO61w0PAY\r\nBkO98V0JgfEU7DIXrNMjZQkK40t9AFRSrt0MF0qPDdQEnmuqQyXGgpHq2OA3\r\np7Z8sBjG6L7pJTs1MquzIq20xYdaWuTQdII=\r\n=Gd91\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1774-127.0_1652292393537_0.653608378021701"},"_hasShrinkwrap":false},"1.0.0-canary-1778-128.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-128.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-128.0+7ec0257","@bodiless/components":"1.0.0-canary-1778-128.0+7ec0257","@bodiless/core":"1.0.0-canary-1778-128.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1778-128.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-128.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-90zYdAQ2SYFFwG8bshVJsv0wDJMprdJ3vz6Pgsnpv2++PmDSkWAB8aFWlDtS5prt4fQjyzLsEISYJFIxIY76YA==","shasum":"2f3c3c2550aa7a2cf0d883150caeac80688987b5","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-128.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZnxt/CUzz4jfv8E2/AJyPAtuSXlGfg3HEr8kSNTaTLAiEAyVeFU9na2HdvnIVO+bOK7xI5nfFRJkdK57RFNIvBSIQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifAdoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgnQ//cMccTUJUdHgX0LvANAsUXHF6b4MqKGV9L9nGA2+hmr5VerR2\r\nJlpPMVxK8FejvpepQ+5/LCVIL75Bq0TfAf2zwIDwu+ZvVIInP8gkLQyLNk7S\r\n1H/oatlf+mWzDiBBHqmaGyHlCxR7fsP1eSpJBFXRLNMSkUIgw9h55CThM2Z1\r\n5jwbJe832zEjRH7Q+QvD/3TKnUpUN3BiI4VVzmao83DyFTD4A6W9dFk5/jTY\r\n8gwpjqOmiL5aOHDGuY2l++qQuxgEJw/UqhZGMqqdksF8oCW7qrmtM+guDD2A\r\nGGmrt6CCTcK1UAq9yC0PUSFupUFiU4u2T/tDujNoQ5I5fsLqGbURZFEMUNOe\r\nmuGxHjqlfCikPQ8+X5nA0wEWTdW01XE72FFGmbjfQZMmD10a/FwJkPTh8jMD\r\nlz165BWvTijUcLHRUn1jdYUTx94zbhnT+mT9tNAHwxGUrG2MrYnFmGGhFTD/\r\n9P9y9O58ytMeBCst4zVcjVtH8e1Bk3wBMQLsX9l6PwvvilaKtplW6S1luGgD\r\nqNcIP34uG4m/FeDAgSVLHEY5mHlghsWlHpHHQ6FlbqUGTj3mEiFYy66fLQdq\r\nlm9bO1qvOJ3NFE99ygEGsZ6dYe2UG3HfS0gSh6ZvejXaQbnksHq9V9KSUwf2\r\n4KvOyzl889Qp/pk3wkXQVsvUtyvDNUy7Tsc=\r\n=4QO7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-128.0_1652295527793_0.9870333028917049"},"_hasShrinkwrap":false},"1.0.0-canary-1778-129.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-129.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-129.0+7ec0257","@bodiless/components":"1.0.0-canary-1778-129.0+7ec0257","@bodiless/core":"1.0.0-canary-1778-129.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1778-129.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-129.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-6IX/Yj/tNqoMg3e0EJOizt7ssEdPpKQv0XdXrVjF2hLdqQjPwaaOwhs8N8kjUOFKpvTAiDak6GAedR5y+sQjcw==","shasum":"41e18bddb1f333ab46b617cae0a194ac74ba2924","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-129.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3RgCgAEognH6ffCaNoiRJg0mRe4oyjNgdBO2pQc22dwIgCd4Er7P5Ympy2YcDPT3iwXzuRWeRG0WyWkK6WZjYxbI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBm7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV8w//dG/edn0pdRpmtJd1YOnBdLEWAqj3Ll8XfUEh2iogAO6yLrUM\r\nOVnf431By350TlnpfyZO/c3zgkQZePqvd1blX2wApo84Qjn9R71A1nJF+ZXs\r\nvoU3cridwi7uVgCSREBpuNSMDhsAJm9Bo2b6gTOcGH/U4GqYnjePW8vLtTzc\r\nvm96AC2xpwLKEjyPgN5m6D4UraYTVfArnMmp6eH3EHPn1rhjhMjqDq92Da9r\r\nWlf0NY8efjUsrjw7hRjeoKlKkm6PiGLClN6c7N3jjr2JuOFh8x/Zi7o0Kogd\r\ntt8AP87jSktldCVE3+j6Xu75BEQHpE7VARyIlo0siN1J/BWjos/u5sW+JiGq\r\ndKxQDae7BbTOzhLmkjAkc/3BB5vpwDjQxPMhKcK3tqvbc8yuolPdpOdUyRTe\r\nESGvYIZA0D3vOPVkJFQxjk+pl0YpmDBnecVNZY4+zme90QaQHwtv7vwrfgbj\r\ngE4kRfzKUkkhcjICfz5jrDNGeIcFeEN5VmFd0ahjo+128iumER4N3QAQc8zW\r\nucpruV3i584SwwDu4GfIJ1cE8wnCBThN6GtxneL/4wbDl+3Kz4zxxi6PIsW5\r\ny6MQb5tird14VC+h3aiWVUl5oloyowqELfHW8PSOPKRiIkx0O+n4oA0H2LzJ\r\nV4QcCEfI5b73JxtV/5khwEd6r3QQgeJG/9I=\r\n=Aiko\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-129.0_1652300219606_0.6902520730170909"},"_hasShrinkwrap":false},"1.0.0-canary-1778-130.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-130.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-130.0+7ec0257","@bodiless/components":"1.0.0-canary-1778-130.0+7ec0257","@bodiless/core":"1.0.0-canary-1778-130.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1778-130.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-130.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-kBsqXkDWcOIEObGYKr/khbAjE/vbQnZO9BJjBW2Tlz7YOSY61cWriCcveHrZRKjKi0wmchuGjX/r53Hon4QpPw==","shasum":"982ab54cad77e4f9bcb3d726611ac646fbccd0de","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-130.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSbCe8hbgOe+UiQVpalpf5pbPlLQIszg5+CwsHz+iZpwIhALbBdZMaDKKpeKhrA1LZouAosWcMBgVT1G6P6kiDRIy/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifB6pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmov1BAAl1V9iODiRWh29l7W7gTMgPdRB6KImW1eoi/DU9PuRP+O/Oz2\r\nZ3dBoTsPCexTsr9R0kUMaLV2YjNkdr+ZJ4YVE8yHpvj8FN2q6ZXcG1kgg4J0\r\nMUH/mw6VCufLgiMsr411D4sYPaIOdUNV9gyghgulhPy1TTvNY+BwNxzXYFRK\r\n88C9Bt8bWXTkmYbAT0TZr1UoRvWP7xRUVFDZuYmKiPFvRxj/AQvPoxh6eh/a\r\namkvi5bhhlLL+wnYxTUmISlsnAEXqW3cCG/cO9RkTXbfbLxv4PaTkv6P2del\r\nVJzlrdxWs5wm3SkhM0OgsNTs5qf/YYpNpJbjWvJYL/sntQk4RfMhEpfXFqRI\r\nOfByuEs0aj+eZzcTGjj77lf5ck7rtumeaH8BgmFeOFL6TU5Yz4ghS0FxzxXa\r\n8YFQuqficgGpUfJ0GF2bYYqCTEmjnXCMK8YXAJJuDuwKT1/2613xWJ6N9Vjl\r\nQIcjT3g3y5t3CETeOzTFsD5L4I+RLMLQlWl0oVq4XtOomWenwoPqSrvSsSyX\r\nLuoN4Xj1LFIRhut5eL1ds/qIqtmRx5rSXqs3RuwXm0LZK0j8ua0RRhKF0hZp\r\n2LQb7rAfLaqIiMJFGeZdHCEkYgI323UtRA4PLt/BK6eA3vtZUurI/uJObtbh\r\nJ5FClpDoEHG8JrqPcQhio4gShZIQN4JfZ6c=\r\n=l8TB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-130.0_1652301480742_0.06447288010154062"},"_hasShrinkwrap":false},"1.0.0-canary-1778-131.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-131.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-131.0+7ec0257","@bodiless/components":"1.0.0-canary-1778-131.0+7ec0257","@bodiless/core":"1.0.0-canary-1778-131.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1778-131.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-131.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-UBOxTBgE7tJD3J22uLZZkotRnuEGtNUPReD0bw56jviIXN1O0AWDcxV02A8vQoeu7VEpzdHauO+KIYFm+Jn+bw==","shasum":"268c4ad2d433cae9c4f764ac20f6dff91563a94c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-131.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1Am6+J7wC99YNz0DNkBJOT/tQ2JKMxvMWQ3xDyIGF/AiAtR6R2Y5lbKP1bLaUBpgJe4BnT3L2pBMqXVUQHdu6FWA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifCJoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoOQ/+JKNsZeAHubJI907il/JeMWR1nI5utvD85FL4VRvF7K5y+b0M\r\nN4dVfqDg6RRaDCRio4B8ARCYxJiKdgpoG0r9o0i6oRB2BRwrFSweHRL8WrkH\r\noUdugria/jq1fl5VCteVj80TQhpCEVJBI/lhZ2Qv6tbTnwSnnyoG9V/ll/YF\r\nTM5/rJq5YwJmfjrBSE3fyu2Oqysdhh1F89iFbY3xZ/r+R5FSj3lMMDrEaVqD\r\nA7WfK3tuijhFu7fP3P3OX3wqn/NUeDlySJQD/OTjE0nQZVxiKvMaBsFDcbk4\r\nQkQo/itRWM1oy0IJH4UzzorswBrlsLQk97CaCsIjIoaHag7/AG6EhzhzhaYL\r\nRLmYmdvgfecv3h8mVawUmltUv0JV8c0KAoRnIDvS+sJ5xo2Ru7GywtI9h2KH\r\nxp5eYgvrrQKkEi6f17yV6BapU3IwG02jRGFp9LMObpEw+vmw6MDM+UExqCHp\r\nlQ2jKnnXoQSIEDU1y2hidDCIjbtvx11PClRmW0oB8XU+I7oK1sQbdM2T8c2o\r\nv2ihi3FF79beZCv2F8JQFyMjNPvlsulPiUzQhECCQBKoggssg1IQ5oftHT9l\r\nTCgynqWH9gzBLUJPCwJxLcXLoApGggeJ8KXtWfucQKLaf4vZCjBbZrxGpzeR\r\nfGfxU+2eUnxgyGUuCvE1KUYpmdcA03l/Trs=\r\n=isu5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-131.0_1652302439767_0.1751240292534635"},"_hasShrinkwrap":false},"1.0.0-canary-1628-132.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-132.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-132.0+7ec0257","@bodiless/components":"1.0.0-canary-1628-132.0+7ec0257","@bodiless/core":"1.0.0-canary-1628-132.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1628-132.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-132.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-DzA+Q4onL3MhT/YPa0AZmYXrfWMQCsmB8EyE5I7Y1L4vdJ4RULHDSbyO758g9l3TXuC+nVemcDGmXTD+rdUVZQ==","shasum":"afb0b9f545e6f6180aa11c4c6cd071989d0c19c8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-132.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxUTx7iNhXiLtFmys5TUVR9PDTByswBsqcNdCgj90aPAIgBIlzdW3Ap3N9sbd94wxFJsakfHNsHF3dtw+kGabhpvE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifE3UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruERAAjtRYY56aQL8O4oaJoznAbVAyvXdqTZ8TJjTQWzdpw0y5uNY6\r\nmIBr7l6RpMPa0Mp3mIyEUhD+46DyA2J5aBECuQQ8ysE7chu1+/dH9KyYPlCU\r\nNmFFEU8NUublxSBZ2GPU3dbibXKdY2KejCnoVmqGJv4QYj3bzzBRO/6VkfZa\r\nj4pRlqto0K0lvuoGlZBnQBawl4qHfX+bXZLE7/8j8J2jDWg7n6JPpBGKWfow\r\ncPKIC1C9k8cvxGU3+u9JqBYwt0i2/Fk2WdOfRB6ubfEuNuVqFCz7bHe0wtj1\r\nfBZNTcrzdoiLWbx8R587ko7YOaGkr+GSBYYO9eoXo7x8gHzFNQf01nokBYth\r\nhSYSrKrwzYJqcvfEQSkvWTFM/FkCbtCfPW+LGIR8B1Q6EGhKJ5LXJwC5oxj7\r\nAsiOikJRpjB6Om9mrqeciBrDY/C/T/e0L56R9BnLVIO7cu+sfnyySk5JDM0h\r\nrBXXXq3JT0yZ3LL0DgTHmu0we0Duxi5QueNDIY+Me4iWF7SA7BVlJk/s35Ni\r\nlWi16a4CHArcvHAsBi1WGZF22pK7O+/1Y+UGoqYooIzY3UgNcxa9j1OaN+NW\r\n8hkihZQp251JQHzPi2o3Ulls7L0z1ZocK2Y8j8PemWE9xxcVvG3OMC3/j3AS\r\nfVGLbut2VdsCiWCFl7ocUlBAQHZMuSoKcCk=\r\n=Zvjo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-132.0_1652313555753_0.10115120530921473"},"_hasShrinkwrap":false},"1.0.0-canary-1628-133.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-133.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-133.0+7ec0257","@bodiless/components":"1.0.0-canary-1628-133.0+7ec0257","@bodiless/core":"1.0.0-canary-1628-133.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1628-133.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-133.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-XC/4lXcgW1cF+muVfPA/mmu9R9B3OoZPGqMa+7Rwy4nNlOmqrPu2p+m3aE+rlnS8LFs/5vjB04mmdVUQ4/5g5Q==","shasum":"ed9d7f40765c7f1d2c77b55c156da9674a43d574","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-133.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBS7u20fnQGupeyUQtuCAubp1MLTk/07ujWee58FZl5GAiEA+BsnUl0z95ULLL3HkSLolO6T/b/JN+tZlDsVvwQ1a5Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifFhwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY2A//Q/e3bqz+DA8OQTGBI+JXUUfXDa9ih7t86rrMpRFdxE6gbhQw\r\n/rcAoUsY3lMrHPBz1He0zaJIJQf4Qbzab8ohF7IrunpUX6L+q7LPsdBC2hBe\r\nvMiV7y1gJZeSviMgnrIst+r9VeGqO/c4fs4R1dNXs5j0B5ObEgA5gLOY4Bxo\r\n3VKgpyfxBJrU8g5gE9JR/p1DEh5gQQyJaWDKhHmDZiO0JXTdb//ZM5ncS4hP\r\nWAr6OZtc3ssjZObEkrQTOHirNtyB+UowUlIwX5ZRuZvCn127VxgABQrRF+mK\r\n0UqjvQDoIne8otWYh5F5EGX/UOKWAnBheH4GPYxjqMYPvWyRjLA6O3ScgYxO\r\nvDTzKAurI0Yr+dTjwEWyf7Ykstd4yZfiFKWtZM1N49nzNPaIav5rB1/XHKjH\r\nZOfEeorIXVkom992lGsxd8DylQ3DSyNfQcfrJ1eJ/mEWAsAy6L6KPrAqSd2o\r\nQrDtvgO0sfqeJMpgUaiP9hIquVUrabFNvIrJovO76kQmkr8nAl/x3jMa4Wzh\r\nq0q7tdFlMtF51HBrOqN7JgL+DeYdan6QfPXMi8/8mo+S7Laddb9D4wkK58CS\r\nAj0h1Hg9bQhrPoYyhut7ENUiFCW+q0qkP1aTaueyExyCmtcY3As+W+kO0mWC\r\ns8mpIKo/1PaAMdrVdASx2xOAjZzOewORzbk=\r\n=ar9J\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-133.0_1652316272336_0.8561820498511488"},"_hasShrinkwrap":false},"1.0.0-canary-1628-134.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-134.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-134.0+7ec0257","@bodiless/components":"1.0.0-canary-1628-134.0+7ec0257","@bodiless/core":"1.0.0-canary-1628-134.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1628-134.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-134.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Alsy36EU+D1+ad2rQ01CgLtcX9ii3xqSRF1x/Hcg2j7N3wIzaOdOEtV81TF1VVMIDBr38vgAbhKrBG9VIeoYHA==","shasum":"b738e07633f80a4ed4c5840821642988bc19fc43","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-134.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDmYypuGMbBlkarnuQw7ZgsKtYEdC2ft0aSdcu+BfquFAiBpfVIFAF3Dd9R1YNpGtmbishfu8R5PEdaLubLBst5M2A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifFjaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpY/Q//bkSitaT92vWcyrPKs+P9kiKhumpPV7ARMqDfvM+Lw8lKomL7\r\npOPv6EuXsxL/VhOnx5rku2BizOxLLusfGXkSugPvoG3SqHZzOPn56S7m8+5c\r\nNxZPrLj8Gjd1Jgy2oc36RgfxpSEiGEHITVekFitefPc6DKjnGwb0Y7GOpGha\r\n1gJBZJ8KWqsZLxRkTEv0SvnfCMvztX4LSQskgmeTxSR1b71Dmhiv4agRNDFA\r\nBtpxAxy6otUMWSg0W8Y2z9oVqmWEzmAZM37k00qHbjrvR3K0Z9gsgO5xChgE\r\nPk7ZPG7mDNcaVKnluSXVPecSY34rkKsG5LzxL6sjiWowQkM1adjKHxTsZp+v\r\ntUQDiQvoTHYCJpmCdGTMuAW8bXXg6dUxFHEHtDSoaBUC8oHyvH0po8O6n55Q\r\ntrG4sCpjzYoqtECrwlNsBsIgcsCaqQpgPYrplKyd4GdCajMxChOLUAQo1y+g\r\nEhs1pwcCncoVxOHKFlC9P2ontUP0ZeesieY66mdZKWnOCsVq6iL6z+W0ANCZ\r\nObxl0c1xBG3qYV9pwnIUchJ5tbS9dt3YuVqLw8DFZFUFcUpqCROjN7O8IbH6\r\n/vr/43uBZWmy9H+O/wUz/oJqIokr8Xg/YUTKlcC6Tjt29P4mk617GzlcnRMm\r\nWrEvSAyvxC1vfjU4spbFVOiWjv1OegEp8LY=\r\n=CWb1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-134.0_1652316377791_0.08311728273497265"},"_hasShrinkwrap":false},"1.0.0-canary-1671-135.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1671-135.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1671-135.0+7ec0257","@bodiless/components":"1.0.0-canary-1671-135.0+7ec0257","@bodiless/core":"1.0.0-canary-1671-135.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1671-135.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1671-135.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-dSuqYq/6i/qWfDoxzz60RTcxMXaZNYpoMJyYsQ7KnF3Ae3ruWDxYLctSlurCNyjd0OaNy34yghafguVbXmp9ng==","shasum":"3aa7f929fb12d1643a7c6cc11c49412bbe7c1da2","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1671-135.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOKRgfjhxbqTP54fLguZmp8bglsmYK9kIJMpVGWphLuAiEAsMQagR0qNy0gUcNJpIirCiaP+yZC4cDfNwEe4nrRCJI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifPPIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2Cg//Zvmmr7+y/1QTUHvPHkOLhw2bFWvsuAFyR5qoeXWlEJ5Li8jf\r\nEIdFQHpSY+3+tsFR9LBCAKUoyr+gu3uNcnmWU7w0QjtG+JPmpstcdoe6wt14\r\nEG01vpvmdJXeB9fXKEbPuwIwwzvK+0468xTYajs/cr18qh/pKpbgyfx9k8Fw\r\nThIoGU/Hxn5ryxOuqsnwjhrHpuiB7MgpLFIdroTwTkO9UKSE5Nfh4VdfCppT\r\npcu85bzM3oC5L/28M3mPTqS1apBJA0pS0wcY1UPE8fQkiEtbThJug+AaIJS7\r\nyPV+N2qK87q7RzfuWlsLNubHyp9VTrZmPWB6ChAWbZhYvygUCwK6wwe9rVtv\r\nm//iFSjPGEI2mKdXKpotOZrCotF3dsmoxfIXCG28g8pmnr4041sstPtWA5XQ\r\n+s1k26kQcUMTFnxqHjJls4RoQdAZJXg1+nHRthuKSsQlXS3ZhOLoOjtLdLtV\r\nzRDhZ9ehoOx2jC/Q8JyD0GgYkzxNp1XoYJYbC4ikyYL16/vko+PLWE3ZbIUM\r\n1/R8zl1JKuxsbPLRhZ/62my39ptt07Ij+nZ6yOyKdyfWW8kL5G98QDyAKC0p\r\n5cmgQxInIAhRIw/KdUOk8d77klN08/+ooDAkDTWqxTfiPW7ZgpuWmWbtXAO7\r\n5QFZYvxwhnJGzoHPRuU9xThXsIyHn3Hjxws=\r\n=GHlf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1671-135.0_1652356040411_0.7428417159380563"},"_hasShrinkwrap":false},"1.0.0-canary-1482-136.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1482-136.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1482-136.0+7ec0257","@bodiless/components":"1.0.0-canary-1482-136.0+7ec0257","@bodiless/core":"1.0.0-canary-1482-136.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1482-136.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1482-136.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-7NuSCpN+6r+XMKh0HeoAeyG4e3lLy62R1q8Vxn7+6OB2+oIb+D1CGdGa9DwvyhZRis4HrDZuVzUMQFvbOgFxdw==","shasum":"aeaffa885e85abb56dab258fb5b38aa5d9514537","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1482-136.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAe0rsfZPbaihhbAawBr6XpkkO5H7NhR1V8YA0jHoynwIhAKKT6Hzu98Le8fNSseqotZe8bK/j4rBU23V3YJNpIrPE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifPl1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZDRAAmvrX/QF0QHGl44KZgq+9jLPzAr/YbEGfcjxFIazh1G55HSGi\r\n79aa2Czq5JqDW9PY8/rWmVsCWbZf1g1OBidRM4pHtUEQNKTKshXJ41NdIPEp\r\nh4BpsJ7Uij9Wzz62rPpN+ueWjUJZpE/MMISceWh4JEtNYG8Lq6c6dQFxxGaP\r\npNfsmitlVvPpuWB8dJI9R2zZgqEEdU4v9gmfGYlV5pG47ZtVknAlzIFDEbax\r\nQqcGpv2b02AwrYz9NVTUwUwI5M9BxTsAExlP5SuMFFjidnzQWjq/DtcO3zTC\r\n23YrZI/S5ThS0x93gLoVTqN4ayP2px+/PUpJsXl3Nwgdc+3lNXRl7GXDeJjl\r\n9mieFhBGxD/E/EIrMTCavxO8Kbp3YXP5OG8QHVSCvZKr4SMfCorlHoKAcNtT\r\nTa0QyMA5iqqu5OJcx1U6OAMCjn87AMzrve8k9xl9W6DPOIayX7cTkLWAqene\r\n30SDDymKzc7dZaX5MaN4Ahr6KBTb3/UelJQL3US2NaX88kmM2sYHMNCWaGPB\r\nGJY4X6JcYdZfQqkwXPzTgtnWL0DRSDpPH4Vo+E+GWMaHzUESedv0GMIwgdNm\r\nPhf7v0wtgi4Zf383w/B0TjhmM2uTFq2LkK1jzXtdM8NikCrr9BlE91ybvl0h\r\nSeFN+GlX3bb3aPmsGJVxFPb5HgIDHS4LLZE=\r\n=QtJr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1482-136.0_1652357492986_0.013003654377333751"},"_hasShrinkwrap":false},"1.0.0-canary-1482-137.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1482-137.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1482-137.0+7ec0257","@bodiless/components":"1.0.0-canary-1482-137.0+7ec0257","@bodiless/core":"1.0.0-canary-1482-137.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1482-137.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1482-137.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-f1CHYQJXNs/M9JxgMDGI+4IY2xpYDc7CHWGrEmtNlXHSvTgEV9LZwW+ZGiR2SrJVrytCQNtZfsfdBU4IyourMQ==","shasum":"4305a819b2ce4e510be913bdf049a9de19e00672","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1482-137.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA2RiNvDZuAgGWvOMhHdTTV3gKck4X9jE60s6rLa5xWIAiEA737hJw6/Kl7bfWAmM7Uc/UoG1DqTpDOD1j5sDHy7JVo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifPrBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/1A//UcJJHtpRXgb3CHhC0SEyCavnetpJF3mrwTbLdLBIaMJL1Jkc\r\nTAcFRlxEjDkzLCoNCXXjs2Iy4QI+hI96PnZJiPedImVIFfO4lE9VOyMg4qfi\r\nIwkyk1aSc98r42lwaCvMQY9akOKOnw/t8TTzKgq4Wpx4DBcKp8j+OcHx5YgA\r\nHywtu/ktP2u7I/lLjldAUXsp1RW2PYF1sTIFdCXkuVNUobBU2u32f+Dea/8B\r\njC40Tonufdw+xSWgjC1zcoJO+FAvkukahWBieYxwH3wC9T/noLiwgJ551A68\r\n8CmYrolPKGcjGzSCWSEjgY6yS4rJXvqjbAxCcbDiePpODdo5sJNWDYobsGSj\r\nDwmRPsWa6ZyaAaWp056Ex0dMzIok8SbLTZc8hWbeQgytHaq+SUa+FMu2Y7f+\r\nXZ9tu+LN/JtFVFXEf9IiCAxIs7GBw3Bp/knwQS+wwBDO+dVMFNtqp13dYwQR\r\n8mszKGL5EVXzeJ5Z7jYxuLv6dU3otqFsU7Lxbca2Et6o1oR7QuzrchQdIW9M\r\nK5Ydnj2GyEb9/z1VQ6WgSesgPp59tieyeJWIzD5zfoNrcrnU/IYf+zbLi16s\r\nqQLdi0VoXDNlb2HudJEd+f2BcKUP3LRpI4NatnVkk6QM/aMChZZ/7INf2LTK\r\nY9cgKj9KticBKEJinKSgV7EiGUymPnKxKK4=\r\n=1BdN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1482-137.0_1652357825415_0.9957974278817527"},"_hasShrinkwrap":false},"1.0.0-canary-1671-138.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1671-138.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1671-138.0+7ec0257","@bodiless/components":"1.0.0-canary-1671-138.0+7ec0257","@bodiless/core":"1.0.0-canary-1671-138.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1671-138.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1671-138.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-YQWEbgjhlWNx3UqSM0mVmxR0OE32qqSa1xrMQJeim/YXv8IwKMf6aeXm5wCG1eUBUuta2VhGTwU3TVs+QwaCKw==","shasum":"c9fff0a55e801972b5daf38ae1d6a111d2f59235","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1671-138.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAfjBPTv75EOKgKyttNeFfhkKbBvWmBgRNnuRrJOwUfLAiEAkgINxUioMEK4sP5lsVet5NXWvOyiiC8x8oMhGpLbELI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifRDSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoP+A/+JZQQX6yaPaEM/jmErWSi0OvbdwpwTY7RUDPxIkYp2/HiJQgt\r\nOCKr4A/Ob7qcBJ/A8U47JJLpArA9d6j5ERzIYxwBjEcYDMgfXMjBhaRS+DYo\r\nF5Gbig3OM3ThE3TASeOa0aMnwdvzaP1/MIonnmtLM9BBhHHbTSAs4irNwKpC\r\nGWfxWeSYCzVfVP5rCaKWPnKGWaTG4fKB+f3WOh2xHW0lSwAopZiQfUJRtEb8\r\njqTjz6XSYA0gTAFt2EujG7beOHwSQC7L7rxampCn9lVnK0JKUTk+r2YjxwrI\r\nU/3eRhCQIXWd/qhv6r9nG31z8pbUbHzHeFTGZm/VIQDU89lbvrASO5/jJ2E3\r\n1JJU83ie/GuCajCADkuy7o+p98sm2hkA4N+TLl9IdhlaGCLmiFOThnPthEdb\r\n7IuEp+xQotMTFdK/sN+pDzHvXVrzgoAuGR+f3miw7ZkP1JPyVTU629mJ8IvJ\r\nOC/3w+ZM/uynKKMpi+GCby2JjaRnG8qS6S3oIfU1ISaQLHOHv4AVM5y7LMgg\r\nZrBdUKwxLgTYc242JrStezp8Kk0UyQsEg+Pa4GsubtnKFt3usudqZcG8oveu\r\nTHvttR5Z4iiL0n5vQfW5tczZf+ACPadEV+3sUkWXwVdwRGvrNMY7JkQa83Nt\r\nUsUGnpGJHScDtWaaz6d4t/t3c4YRXHvatFs=\r\n=uhF6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1671-138.0_1652363473830_0.9460481716645615"},"_hasShrinkwrap":false},"1.0.0-canary-1635-140.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1635-140.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1635-140.0+7ec0257","@bodiless/components":"1.0.0-canary-1635-140.0+7ec0257","@bodiless/core":"1.0.0-canary-1635-140.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1635-140.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1635-140.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-9DJJqMLMTOqS9UWlQB6AbVUz+0KzGE1/mLcvW81JuQe3tAaUfkB/VB8wyIfaER30e/q/kvXh8GgxBRK76d9WQQ==","shasum":"e69252829132e39375c9a29b3915a9e2d532c8a9","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1635-140.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAGWoIYrlxrlZi5xCzfQH9yQSz4nR4TxDv35h7lOSRqUAiEAxZFkMvnFwDmo4cVBc7SAcWLOQqhvcpyM1fHzAW07+Q0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifRJ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGpA/+OWSgxZb9QJIYHJqApTMIlkGlnUR9xqWATkUiNW9c50wlQxmb\r\nQLnPPZ/c7MB1WEL/RHvyj0ZUPjstuxL5O1bSrRCc+3/U3M2CQx+9Cq+Dcp2a\r\n6ldvkuGIqfZPonHAJ4dn6wnROhoAMQnUGQdewpoQUWIB4l9EjmCQdI8/aLqJ\r\n0MUKZnVwPqq2lUY1H4i5QhshuXNvbfLCxyaJSTY/DYmwB5rgP+eJv+9e5QCA\r\njWNSPAEJfdFJoXxkeCqL7tQFKoq7pmtRl0z58/udiNA2KGG9J+oR7QmZufVE\r\n6QIIAdqnFPjnNMfjr5EK3sf0y+GGw/gSAR50adJoujca6U7EpCVPSb9iIfS0\r\n4guFAqYXWSad76cXtuQb3eP2NHkILJznrKBReBns7HnZusyS11G4anOMZUfD\r\nGzNth+RHQrOSKaLOirjgHj48LuqvXN+VelDo2EmFEvSmFwi5wcM1QIn+pTVe\r\n8jK025rbGbN865QWHn3ErcgBl/m8pL2ZkSHuHNSiW7qoBAJibAjtGBqBgpmb\r\n+UDnPn5vvRF3/ZLjErda02llQd4YoBpQvQKKf0qnCQeo2F7S/c8L9dYsvXkL\r\n3HuvGYDNro8HN5qZKPo6W5wyxf77pgDXXdVpCTcyqqe7AXucZxnGOkgzPBFY\r\nq4XzCyU7RLCkaCpIAleCiFpk52l7AC4xJ80=\r\n=qXv4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1635-140.0_1652363895025_0.876593463675577"},"_hasShrinkwrap":false},"1.0.0-canary-1635-139.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1635-139.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1635-139.0+7ec0257","@bodiless/components":"1.0.0-canary-1635-139.0+7ec0257","@bodiless/core":"1.0.0-canary-1635-139.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1635-139.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1635-139.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-v/rYKbi0trzwDSD5ew9KaFZpEYL3JrZTps75YOpYm/KZPNhJiW2YrsWVevYJdC3j0L/y6Q+KUL0ODIu7To1F0Q==","shasum":"a694f900310c4215c8f6fe7907b2b9e30df45c5f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1635-139.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1XIEsaWPfUG7tIWTXqCKjGTGrdMLeMEir97/I9uB/4QIhAKzqbARgVcU1VFUdKVoP565LtjFAS2TDBvsqDd6qVO92"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifRL9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+gw//bfzbnwCQ8EkoPuRzYMQXwyl4wm4T2EfEOP/I0sYa2MfWTf79\r\nbQ1jNzjmjI4MQVZCn+f6XoZIuTqUJWJU8kr0D1YxH4ZaHt3u4SNRTC3MCZrz\r\nNpqpo+bFCPHR9cgCyaAY1OKRkmf/X5s/JhFOY8f9hys0ItjUJcrZjy1qFmQj\r\nL0jhYTQQjutcrwLaa7CJmXMZYsEdnSCunAZKyI9KlOUJd5sLVs8cL1khD+ua\r\nCl4aLN63Vg6cSWvt+u9I61sXbrbTnjitzZJamCZJwwAX6NROccH6D8B4CmMu\r\nNdfq5XJxl0uBWxeuMaPXBxRbOtirBDdOzZ9w0gj20O/v5hlr7NhyDbKHwbsY\r\n3vOM7dgGt+oWTDP32uu6lNEtYn3g2YCdVZvAYcANe+qXsxQVXitaMZPINuih\r\nUBZndVoI4u0X2B1235v7mhMejxdJuDVRfI8tBlh+2fk+5veTuuqZgfqYoqyk\r\ntOMQFWzKKPEliBhwkPdt8tcFuEypbEmH70hHY4EP95D3CCYMOdFCYVFhYK0B\r\n5IoJ8IZavwnW/3/thuv9YcEWxK0B6UN588mNNJ9F8eZnxHle20eItsgASdGL\r\nZz+UeivZ8W2fkh7Gly203Uq0OCW/T9/Cs30gqIYwxrcONnhthahdpVCTT+WN\r\n5iSeTQYk8v2l2C4SmNbKoWpvc0UjY9v//VY=\r\n=kLtH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1635-139.0_1652364029134_0.5191524036018136"},"_hasShrinkwrap":false},"1.0.0-canary-1683-141.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1683-141.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1683-141.0+7ec0257","@bodiless/components":"1.0.0-canary-1683-141.0+7ec0257","@bodiless/core":"1.0.0-canary-1683-141.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1683-141.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1683-141.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-8AceQCckgryM+nqzvM7KcgrhPA3D3M83kIiaqFXOOmeDNyBVDFNsfS92FKIWdIUGIrAuf0F0KQrQh+Nx7bwA5w==","shasum":"3473a7e6bee8be95f204871627fe8f1110160cf5","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1683-141.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEughQ3ibS9is2MWi1skyXTu2Ew4F4V1xF+u0clMKvtSAiBs0N6AuQl1Kz4+yx9jAfqj9G0ngJGIOFfVlK2j8H6Xdw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifRNLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAVhAAlXRzfL5GdteavM6z02YkiYy1hVkn4qTCGo0qyuVfxt+xYQkq\r\nfl18Oomq9CJwMjPgQNFJdyjFY7Tf867PnEasA0JYmYqHJWbJ596r5Yv14xoX\r\na87Zuoixr/r5K4FFVk77taiS2LBGfpNAHWjpHkNeq0+TEgIy7/M6uX9pPp/6\r\n32Cjo1vPYhn5PJY2612xpmbIQjDJmUwOueV1DFF+l+A6B99Y9PEHbGyoRcp6\r\nkvl0d81O4cRjcuXZrequ9Ey0RU2rwhg/j9O/QUi9SRlT3JCUfaphoPaDLLPC\r\n/l48TamWY90Hc1YFoYQyDqUQ65vJ8jkGEnWDSqIQzmtv8NWZG/yVjv5I7qQf\r\npQSZyMS23nar6OAnoga7J1/+gNkHPVtXkSNN/xJEg91P2BqSdGv/Mw3wIIEF\r\n3XzOktcXbIfAR2uQLsDkzXKOpQPOVXopwF15BYTgUhdTNxcVOV6t5EsTtBL0\r\nyNgX6WqyAo0MlMrKbRpz4b7L7OPK1PXlnkiBNsv7OqwJt0CwtfejEonAowdW\r\n4dup0gdikgJxJpV0r9QhoxgPa10OHhOj47mWfZfFr6aFCUjgwQogZuIZKUfP\r\nYkF5IcM+DcDO0s3a25SiZZ+Pt6sehzvx4YV3CGTiAH92fJ6LtTNrdkvDCjJH\r\nxbKZwuZ4LtXJQgzrE8oDmeCz1p9mlgfcisg=\r\n=GPhA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1683-141.0_1652364106797_0.14882874720294303"},"_hasShrinkwrap":false},"1.0.0-canary-1628-142.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-142.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-142.0+7ec0257","@bodiless/components":"1.0.0-canary-1628-142.0+7ec0257","@bodiless/core":"1.0.0-canary-1628-142.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1628-142.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-142.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-zTCUtdmkS3qzSzqgBGPiKxuolM10g2mPZ8jcZExJWYAq6LiLNk4P6BhXnBS6/ZfRfRpLQu4mW0QX3hgiLOrGOQ==","shasum":"0c457add34ba62d3daa3162d2e0da502ce8f4b33","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-142.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCSs/6QlZWbn4XplgPlZHH9+TR4b/BhY6joM8PPzt04AiEAs5ZLdBy2V0vPIyx5Z4DVxruC9MidYicBjrcLgEUHGd0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifRQGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpqsw//S2GadxIAsyeg4Z+JtmxBGT2AnRXa1mtXdf4WdEB0b0h52Cn7\r\nXyMj6LOaux+M/UABeINkMktDCOYiLW4R0AmWlfn8cYzqr9V0N+O1TgLXTVNi\r\nV6Ws7+Kd8bGkFAmiI9axlayfE0N2X37t6215Y7goZXEZYLCjVFzI4p1kuqBD\r\nRLfKZY1a8nsxvKkPfOYMEOj0+Igj66WK8CpikL1mlUmYUG7NsEfENeIw6KSr\r\nm8H51NkeVPY/w1DUuisHhHCIVxfJiip70U/bcuTjcGQVTpsQWdCPC/Y+k6RW\r\nsLgTjf71uZqw38/IkV6Jtc4rF0Y9obZwZ2CfY/bXGFBjh76cRjT/PtnyxT2U\r\nz1A42f639UeuPIbwhnEKyc7OQJj/Op1aBGToHzNdfGIx9vR6WyF1FIYiJ3fD\r\n9VVwsE9tztmKKoLVAIwdg/JW46uuUxunHfAGR5hyMhZyEmtDhJ6y652mmK8b\r\n/iSEWv5jBdZlT1crdbNjNVohzLw7osFNsWTGpQ23ro5WJ3SNOyeWhK1R5TRc\r\nG+dLwg7qWNk/E9WHD53BkOtlz5Si9Y8lwhjsk6ZReOcG7442ozcuhZA/7++z\r\n8/nV884hQHBdbbFeWUNJaXPPSvR6BpAVCmfDgDXnK4xFZwGIn/sac9gs2cqe\r\nh2rO+2ZFPm1zHbxTS3xd9h8JCO5FstMWwPk=\r\n=PdcA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-142.0_1652364294651_0.43492054559215254"},"_hasShrinkwrap":false},"1.0.0-canary-1635-143.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1635-143.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1635-143.0+7ec0257","@bodiless/components":"1.0.0-canary-1635-143.0+7ec0257","@bodiless/core":"1.0.0-canary-1635-143.0+7ec0257","@bodiless/fclasses":"1.0.0-canary-1635-143.0+7ec0257","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7ec0257a845dea7b077c4d3e9f176f0c414c6e5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1635-143.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-FACeTd9/OKLzAHRspufLeEcLm9WfQOtEFH01PrgM2RjXrlFuvrlTqUhW313S20pQ3pFwWbQr1qFjbDx1cfyasw==","shasum":"1af3b1ce2133b09e75df7c0099c12ef46f95477f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1635-143.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZlYuZx7y8m41DDlZKERlMaywb0JxxOgXkrcXrkxIxDAIhANkCRMdInwJW0ZKWFmE/+246kmlbBx/0tCEVV7mDwWAQ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifRUfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUbA/+OAiXaqK2fZdfXmpOaaSTZkl3fB4pMRMVNll7Y/+8nt2BD2jm\r\nIYolo7Ddnh8swCrcrUcecVTdlw36ipi8VO7kYkSYMS0g7WLErAkX7AAjbT0E\r\njM0E662G0xQw3igJiADdgS/jt/dFu/+QtZhnLuDrCbKprrg8V0huLRtUkPN6\r\n3rB83Iz9L9HUmoRan+JSKdhengGlxfz+YXc37zqa2HCO6MsXkzD93lHUUoAE\r\n62xOJLWPhbBSIL7auIwv2C4kiWNiTpUC6PdIYWs9SCwWrbRAwO09TmgOc3Bp\r\nFbdWS9APRel5bg0PL/uhEtfxW0pPdxhMnv/CTcD0HvK0nwbXKuUdcpT3ez6d\r\nKmErnkFTo33SR0ZaIUYK/AOTvMDh4Qa3IrkoP5aTyU7vH1mqPLvypf5t5fC7\r\nWARtVfdwcDJ2hXeB91eErYP7t63IK8sFT0W+3PlrE6LK8hYMYzot7Ba5xbRc\r\nrA7jJvH9l7yKNaICFvY9k2oE9XH77IPzv1NSclGZpc61ykxW059qLe3Sdw42\r\n+OvazlZkcLd96yszVqaujqPyE6mxJaGcIE4GMkuIr143c/5DBCAys3DQiwPT\r\nAr639lmTZWM8AhBGJGLoLLJNWNG7BYWywkwotkMEMZKN1vPyD8sIcwjpRZXo\r\nEs0VweTTpQ1fCHeFm2reTnL1oB9WOslhPh8=\r\n=aqFQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1635-143.0_1652364575543_0.7413304643986665"},"_hasShrinkwrap":false},"1.0.0-canary-1671-144.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1671-144.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1671-144.0+3a4e45f","@bodiless/components":"1.0.0-canary-1671-144.0+3a4e45f","@bodiless/core":"1.0.0-canary-1671-144.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1671-144.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1671-144.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-26xtPIXc/Kg/MwibZo2oEqMBtq6bIMGRknqZiVV3VRLiqCj1dvUc53H37H0zcEHfVKRdPwXWXx6jMGI9A3ClFg==","shasum":"a711f62e039d361110377b000c623079fb11f2ad","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1671-144.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6gfpLPv5L6k19r9I8FS6bBCXz6GpSN8AC7b0S2vfR4AIgODm3MXFoWRmNacqXXbyQtpDEUwVbeyGAjP021JNqvik="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifRvBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvpQ/9FbvAXF8rMRQoZSVq8A3T73iuWqgwAuVcaUoxs1IS2u0FH5W5\r\nMLFq92e35H+OIgxYgAJtAQPmT+ocvruu6fJj6oCXKVpftI3G/Uq0lZQOVh3u\r\nqB1ZDXArAQMg0OiPz54i99xF3mysYwSEkAAfoD3XG2ojPU0Ih5fQBEEVz6Xq\r\n3Nhb4rxbP0O4j24ajzhmHFwKNp7gGYABjyXrznOQY4Wj8NA5wYuSnTH2eadQ\r\nOdLvpcSO1NGraQX6nAjujHgaepVwgGcdL/KeOzuSUNF1U95pjZosrX6t+qD4\r\nOgeYPRDra8vyItLaNap3nSWOj62449t8upFsAM26rw9KltH7ox24gguJ2hlB\r\nW4djXok3SUc7A9l3eRRTGE7Tr6ZqCxGdGpS0m7kI/UC3fvURp8xqt2v1V6UX\r\nPwBzw/2H6FRDm3hFd1zcDoKOpdwwsyrlmLTUlBQzCdOMNITTs7Gr/UpsIS+J\r\nCsiuePEleRQugOl8mCkqdtpzQrppgaUUDRmkBRUYVS4ZwFtB7OMsv+HGvOSq\r\njn4AvFliCVa0gTBETwhEwUSosM8bgOxuXRXmDbIJxpZrX3jxaWeAwT1Hc7ee\r\nkkTgBURg6Rqgv9XfFugcpHWlowrFwCiXvK28wf7NC4mwtipea/V3xEHA6+3z\r\nOvQt70SZy/tMLqWnPOLlvymyHOcSY0JOwyQ=\r\n=fqB+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1671-144.0_1652366273683_0.9377468435252354"},"_hasShrinkwrap":false},"1.0.0-canary-1628-145.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-145.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-145.0+3a4e45f","@bodiless/components":"1.0.0-canary-1628-145.0+3a4e45f","@bodiless/core":"1.0.0-canary-1628-145.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1628-145.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-145.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-9vRYNbCEUwE0q6E3IVG94Fz8Jzoia9j6PuoawRKLyRY8V+pSjyxnvb1sWlM1QoUxuuvFXbeG48bKqUchIqpoTQ==","shasum":"5f65b5d42def65bac8982e5a10922852621663be","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-145.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHtllZmNkICikpbanEpVrVAbyVRmJg/YCB2m/gQQ0vawIgE1OAA5LvQsIp+V7kMGojM7FAfwGPCy9Tre+uaMIgTCs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifSRnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMRhAAk0o/Vone5ghG0dX3JY89otlUKW9t3/t31qpF6523zDy0MQly\r\nnVJHbTAgTbhw4F70mWWBymX+ev+oC0EdtjHHo6fzpYR5K/z2MJQyCj4NkIXS\r\nZRUQuAU5l7ov8jfXDOnqxeXn+HlGO3U1HZ2nkblRKxeiV2ZQaUpLkAECO/yu\r\nR3kSjGsyyAJpg7Y6YxDJjTqnAB89glW53SVfqPTdfNvzY5R9NCaoD9QOJJ5I\r\nEvqrsMWB2m0gL5oG+u9Q3WHnOns59+CdxWmFy4l23g+vuEKn1XLrfBQT/9q3\r\ntp3oomSryHLLtKubzYtt0Fcra/IWZVuZ2mqa/OWLrhkBk5LQGQWxMlcxbWcA\r\n2lPvqXsr8k7CVX9uoKdbsE61Amlfk8uxf5Q/3Lq0bnFVVhpMYY8C3oavkI2f\r\nOMUb4rg/uR46vEruDVXcHIVVvgeJAt/7iKboD50z5q95CvQeOS8gfMvzvnk0\r\nMD5G7RUHzvoHRWi/z5xoEGjwxWOMrOHwfNQXu+ZospWiN6QbHaWvw9boeLEu\r\nJ04n7QG6mZlnmWd61azjNhmrsPyDxNfAJHfEcmmXE+ezODqKb6LkIBVlnQSQ\r\n+uQ4UP/0wkJrtRLoPFTo2ElBN051sTL9arwgUWrSWRHKSRONGtfIWaozxPDD\r\n0RXc99iwMWBulLi9kSxlX3px8uudJknvPdA=\r\n=BxBZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-145.0_1652368487401_0.5064634678827358"},"_hasShrinkwrap":false},"1.0.0-canary-1775-146.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1775-146.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1775-146.0+3a4e45f","@bodiless/components":"1.0.0-canary-1775-146.0+3a4e45f","@bodiless/core":"1.0.0-canary-1775-146.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1775-146.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1775-146.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-yAeG3+g/WmomgqxWnwvBR5i2NyTHGWIUxca3sv7rVieB/jQ7aFOoxrZb7RNHfCqBCy5zZwzASCDgXbQO/M5jJw==","shasum":"3f3be9c32246ba962caf97bc2d01784ef4122e5a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1775-146.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiVmII7f28ZtEw/w2nLU6NuS6KzlOmXfYF7ZD4g4QYtAIhAP/5cRW8iCgoiQK5FWUVtRrUM5fKI2DKN6GnOr9KbeZF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifSV9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUjw/+K/6AMCIViBC510eAKaKgROx53oV1aWhMH6rImqWx4qPPzzSI\r\nagxvFmrttH79nD+h0xvbooehnueinr9Zivs3/0YOy+/6Br5p5TOcq2QAPEe5\r\nWeKhW3H5fiJ7yAlstBu+mNbjbH0wwqlTM0L/nfbQFmhUG+l0Wfdd6xnJrBP+\r\n7IaP0U0ztu/UnWz3XvChea7Rv7qbbEV/xQ8tQpPgx71Amm6wCaF6Zmh+8PcX\r\nzFhkEXOYM9s8iPD3C2fOBTkLOBlOgtNUMM6+la8KDDvaYrpr6Xdj+FxGTvPS\r\neO7iknOwUwurNC09eMVr9wgjCjUmPW5DaV1u2ojw1tSwFzytkB2wHaD6gChF\r\n+to0sOLw5Us0m08C6IluNqZZdF3INBKAIrlFp+EBzmsHJ32AFkTPxkgGx+5+\r\ncjKCdk3KbR7XBUyKqoWO9SGJkPrHbrXAomCEloqCFF+HnUbQjeTCLRtXOPLp\r\nrCU4rJR8nE+j370Ekx4kMethTxLNuiCWfGJCrxCiQJK/2doVA24l+WnCnZ/g\r\nKCI6vGFeGSJrCtUArzfy6jJFxYgqsPzIXbVkUg3CZIQWFQXG7AUr1JkR+3KP\r\nrehZdUw1q0PjphNWSA90f/kcdCMMlR1+54V/PzP+pHkQY1SuKr5SnZS94dTn\r\nvNCwWyrA/wnTDw7PuIYVlssBkkicj56S/uM=\r\n=1cr/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1775-146.0_1652368765523_0.3347266296143283"},"_hasShrinkwrap":false},"1.0.0-canary-1779-147.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1779-147.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1779-147.0+3a4e45f","@bodiless/components":"1.0.0-canary-1779-147.0+3a4e45f","@bodiless/core":"1.0.0-canary-1779-147.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1779-147.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1779-147.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Pu0AWb0VkjI/CnK2B4/TJeBYAyAznwpxdaLq1hb0p3IMUoTfRlzuW7tVTI21/P6GDiy9hTIGABsOJk+7VFCNjg==","shasum":"d28f82caa0f7ceff564e954d5837db47899d4e14","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1779-147.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANyA8jwI0tujGJCg8jQ+Iz6nAiKwUdYCSvX+69+lcJJAiEAoWFzRw8BoTzy/ACT9iXDHPjMZ8ze7a5wuZj+ojo/Uzw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifTEdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKDg//S6fKBAflw50QqBifo+3RkrQZf3BebKOVYwZ5Sywc71VwO3TS\r\nvukEACebaMJz3jMbA2bae+1RtvwZnZhgOwbvo2rkgq2qzxMj6M+VSPThw3kl\r\nqLECR69nSMEpT08hBsMywzrsLQBRSSldJsBiVqX5VTEAw9Ew/OimdhrCOCKb\r\nVvXf/EWDUMeBwIkI68VORqcvDfPC8gTLuOSLVL4333qX851JmOXOT93ypECO\r\njk0a1pK3ShiRpW1bI2gJPOBVrh3CaTAmEPE16aQfhhsY7oHyd87G0hLsbilB\r\nPE3BPnTau5nkX6NNiovQGDdeIXAMNf2Rr8T3EBmfJCNRExwB9IYEJjNemXR+\r\nz5k851dcSuyvzDDwGbLs4/xOX24FUn0PBgohEd2+vO+dLtgVwjbrtwJ2MSXm\r\nwkLqhBjXNwdcvK87eyQNnqo6HpRnsOGWHqkktWWWU/eLdX77FZyIwU7/ERKr\r\n9C/Mr4pberc2FsvkWA7wUo7mr1ds2Oeal30fL2GfMzjaalVZ1HRLe/n9ec9X\r\nKNacw0CseN8+v9dT+4mRwaqqmlemZrkMVYklqUFoLicVQVzdoLfImKugZaZz\r\nLMx34oeEezvAzDOlzRzt6EHPgcaECnalfULGodetmuz55D/wE1KKwvyskQlE\r\nQ9RKT276+BUeP0MBhYuZimEH8RY79NFjIJY=\r\n=tItK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1779-147.0_1652371741001_0.36023478737639114"},"_hasShrinkwrap":false},"1.0.0-canary-1780-148.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1780-148.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1780-148.0+3a4e45f","@bodiless/components":"1.0.0-canary-1780-148.0+3a4e45f","@bodiless/core":"1.0.0-canary-1780-148.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1780-148.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1780-148.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-BsHuWBkD4C66l5NgX9rBScR4benwgvdgRg/50u84qhjETGM3crnoULvnVx22qvHvbzGAb2FpuBHidE5AP0JSmQ==","shasum":"fc38b652eb28355d23039a14d2a6221aa0fc9352","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1780-148.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAxMfMPmi+p9d8demY0ncKxEtNewuycOgizKkYhXuvxiAiBQU0cZZAJIGRQwcKrAGYUO6HVMB5/5zetciDO3oY9bZA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifTJkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3PhAAi7eSvQtltIos5pZkTRM+i0z5xpU1vGg4kYaXH/xXJgEraDbi\r\nmh9SvufLC1vSVgEtvVHv+Hao+6EJQK+7bPNXhGMqoWx3U/dG33GeDVyjll1J\r\n/o+VCtKixWAJOaK9v/Uh7GVuPqB9XwDzaqQJrMXe/DwIT7JNNStEPWNPEuvV\r\no8KM7i+YQ53Z9in2cSc4czhj9xx1TYMjw4l/srmHd7DUPR1cBMWhxGxv5OQs\r\nw73SHpfHVLmwUP9nj0ijGIQ/gIC+GNRiyMAlDxLQX3kL6fq0lzS4pYDX8n4k\r\neYOz8r/9rHNNGUZz/zOAd9vSliYIV/52B+/Wb25WhcAgmsRA33Wgw48o1qpf\r\n35QJq/2AjzTV7dSbJXm3h4XBJZr/R+j0Ivlok1FBlGrv9dzMU24nsAM/bl1T\r\nfB6jkmdugyQaFyOybSz0dpvq0DXU4udwN56H6C3W/gbmc+POg2r6RXh9vnTo\r\nNsB5NFrWS8uh0xknEZRbl2H8pyQXrabfdn/CmCyP46STigyq+CX6OPQrrkel\r\nmjpT1Yc7a+QjCcc3Ntga1EzoPN+iPSALc8x77m7doGQaXdN5UkhBiWn5W3Kf\r\nOerQC7evC4v+D/vUys3PA6OG7Cb+NU/ajVQu4otD2NzCmE7BA3SYGhDypLRE\r\nlY5Zfh5hqlZFGKuR3GPtN7125gt8WD6fQaU=\r\n=lO1c\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1780-148.0_1652372067779_0.5048464525186322"},"_hasShrinkwrap":false},"1.0.0-canary-1730-149.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1730-149.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1730-149.0+3a4e45f","@bodiless/components":"1.0.0-canary-1730-149.0+3a4e45f","@bodiless/core":"1.0.0-canary-1730-149.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1730-149.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1730-149.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-544Z+s8bFl85wzL6ityLkweSXS6b3Jkg1KSVGHcWpbEQ1yzXh7ZXXgezVhhhQ8JjNc9/n8FNDLE/iNaKF9DXQg==","shasum":"d43a70c2c8aa98fd5b319c1358e3a69431fe189e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1730-149.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOI8APbirpBY1+oWlqG5PDweU0zd+Y3iiYSDnJWYl+hwIhANdIdr2xTZxNJd+okM0SMGsKGxeJJCqfrhnQEpJmj8G4"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifTREACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+gw/+KkmDHmUp0ONoQxLfLiC0rmPJ0MLff9hTCu8uclosY9o3Z6vu\r\njb2OvOeNJ3BJv1beToD5XP4NmJBVcc+TabTqKE5ezPNHvWTqXcZvDAV+xDTS\r\nHGGJKUn1sj8Bmg8hKDpjVEPnMDpwVyRIA+frxKUY1368PT02fGSwlT7MNEwa\r\nwu28bZK5XF81onmhP/gBp/d5LcfHbFgbOHCr1Ir5VKx+zTbZY1VvN/LI8F4d\r\nlb3QLxyFd7oFcR0xwjp4MIFHbgCkBeeFQmvouSARaurIZAQok3W+QA+MPoMz\r\nCH1dDhRXJ68B/caVUNBDZdU6vZw3coB2jiXzfcOT3bAkOQPDnvKrK9xMqxOP\r\n1cu7nhBUh8VjPtfuJvEsoYUqfh7dHQNJK0MPxLwx3yiMwj8REyxx/b/xBNy3\r\nhi1pPOr9ZgrnfsOTcV0OBrgJLevzA/gTnf86rPmokGM4BU3WcGyQqbC3zHWc\r\nkRseADUHrrZDvKQ/chPrD7D8QwwceoewFPEMTZPTVsfUQAB8ey1oID0HTByJ\r\nA5zq3ws+5jTxzZzZc6q3vMqabDZtpcUkI2YoovkKHcocTL3ppvsyPVfjRuRd\r\n6sfB082iAqFOQthyCXPBruOIkrEO85dGOMhpu/jVKX22idE5hQNJLQ6ffxLm\r\ncOEYTrL6ebI8rGNpfLjSXQ34I02kykjsc7o=\r\n=LGH6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1730-149.0_1652372548007_0.7113656184434607"},"_hasShrinkwrap":false},"1.0.0-canary-1500-150.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1500-150.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1500-150.0+3a4e45f","@bodiless/components":"1.0.0-canary-1500-150.0+3a4e45f","@bodiless/core":"1.0.0-canary-1500-150.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1500-150.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1500-150.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-61/QehSy2pF3lkLAD097RcFLlSnq1Gm49coGLsU6pInjuan2sil4PniMaxEjawQmhkakAWXbxXL2hufertNtKw==","shasum":"0555ca3e9b5adddc4a1f60338f899c29b7246561","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1500-150.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7D+NNS7J7T0vdaEVkfogZGFISfhIZYpbgTsNIgpRkiAiBc4QHYEitEckHQEdeKqD4MeJMm5biVC0O5BA/1gRAwAw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifWRTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMjA/9FoDtNfiT5jBYJ4sL9uVqPtWNd8+xWLNSgnTWuPLJlafftoZu\r\nC4pJmo5QlYq3bxe4/WTtlWctxnjnnMdGredcn8xzc6EyiKM1QjxE5vZqk6WA\r\n/b+XMIC0X3cVqZeELkSDhNQxLKgiTTSoaj3Jut+6cp+lIrXhN04OzOySrzoY\r\n5jAvMNS2w24WJl8i7OblnGPdLe/aKekaIb16MjWCSI4bX1VLIEQxuvlJixZj\r\n2amCkKRAvAq/gPzlabO446ntGKmWJynqP4V5wtlGnQgh+w7OcYGku44g7toK\r\nessdQAovnwtWJuTUu3oSxDKIs+FoJ0P2rqkXYDh6OUFTzgoCnhp5A2YeP4Ch\r\nRTV2BSSugwKPjHjT+EiGsf9McwSrNpYAhhAt/rgKo31x2DcNGUdm0IDLarLV\r\n4z8SeX8oRC/TByfSnOJPSoKqt6Lw0oRxGjJPlOMZRRAqSfqtw/5Kol2k542d\r\n4PL74hrGod53HkE8X9LRlBBZhdYSwlim3atRn8cCwAR81KFUhODuIiVGL3wN\r\nL05vsf2hBtRtJwFP7s2gWv3KjQ3Z5Yf+KUxiTJllyVKTCF8s8em7oC4ZnoAE\r\navGYBactwl7v5ZIX+7aS7xLqk+ST2nmrXHd+jnpS/5NgQg+7lF/avS2VtgYd\r\nT/PW84emAM3/cIBXB4CuvZ4rxsF+njRW4jU=\r\n=VKk/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1500-150.0_1652384851519_0.06155455329860571"},"_hasShrinkwrap":false},"1.0.0-canary-1730-151.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1730-151.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1730-151.0+3a4e45f","@bodiless/components":"1.0.0-canary-1730-151.0+3a4e45f","@bodiless/core":"1.0.0-canary-1730-151.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1730-151.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1730-151.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-QObHAuoXYrvPdNChvwTFRUWkpN9ztm9Fb5iV2lZ85NhR3RDKRlxJ6G6zhdNwfMZjSlZyGIrOucM4S5UmpnsuIA==","shasum":"3d39f30b2af02362d999442b0d7c9560d8ef72ab","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1730-151.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDKEm4MbqXcymk9cIwa0kjmdGyENaEJrt5roNDAqrRXAIgNwdTnMAdCkIIFm51WnGSkFbVaoWc0r1V1MDVTfk1810="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW72ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd/A/7BARMZsGPy+zmaT23SmTYcoFBIh3gkGRquRfqkoIBtQTx8YeW\r\nyNPRBBFvwjEndeph4EZYoU0ebbZGrAJOruI5tcAWnqlCMDNu6jKqiwNXVDy1\r\n8CaeIL3CnTWZWhZ5QL/LUuK4jIjY1ipoXOt+wqGrcp0aXgiRHr6ham2zDqZd\r\nYQ0DolFoAV6lj/7apIooar9XuLuBA9dr8pUwYcq5HRVsAAWsD+aWngjtCO9R\r\n+ZKeDIGPI8q+E8ziauoPd3K0DiB7/VZ0AN1l084o9STV4/adhgvDzMxBO8U8\r\nnBCU7BXdYGFpTe8UYJHXZRD11mWf8Km9pJgm5z9jrBrhQal1+3WfAX6xAIBf\r\nSOfNFvFTl5fYoRAWVhsZW10rdBlxgu31Na/6qxqTAjXgF7bFlzZV7+meEXAz\r\nERl76XvO/R9mxHGnCap97sEUYqUY7G4DK2mLCx3FHhjkMm80RfXmAaZOh5VU\r\nZyZ0fG4mEAtCS0hr8gRX8XvN0meQtOljMNENGB2oIYLNbq5Xa/D6/lrT2itV\r\nIWwFc2OtAMSodtcYrpR0vBQS+UqXTeiUX9AzJ6zMCa67Brx0p6JyKzqo4YFG\r\nRO9e2nVdGk5l8akYY1ZCuB7orOCWzZeaGh51MYHpQ/MaU60nZyoG+cahklfw\r\nj4DnR+uv9wjX2jA1/2YBQiBJicsmXrmMv28=\r\n=tnPD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1730-151.0_1652387573766_0.7856752242214979"},"_hasShrinkwrap":false},"1.0.0-canary-1482-152.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1482-152.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1482-152.0+3a4e45f","@bodiless/components":"1.0.0-canary-1482-152.0+3a4e45f","@bodiless/core":"1.0.0-canary-1482-152.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1482-152.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1482-152.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-3I47RkcPVq1wf3GKLEqf4dmFI7g3CguckWZdxZ9a3P97fRuYTB+qR6SadIz2doF/SdjUmlFKTVjzVAzWD4HeFg==","shasum":"626f83990b0fe9e46081b90faba1bfdd7ee9a1ab","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1482-152.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGj626kcsdbaIarUxCfV9dx3/OSMEeBy1I//fWj6TPpAiADtFE5ErP9ctFyp9GPSkinFNm1eyh73O7XOsmtKtTBlg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifXWhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt/g//amSI//Ckg8kulQdeOOClhxRxGFwJDLsN2LAult6xBiLY5zEW\r\nR8rCbhuCdVmpKOX92r3ZlA7ytFaMJBeGrvONL04GeEtaQPIkYHb3WxRZsEDE\r\nxqbgDEcnIWo3d8EMSpMxNFLCPEbUbjpJLyhIF5VsOld1YDXbj07GgEwmb778\r\nAizYaBq+qMUx2nmuMZIo+R5g5KVHOsLbREtcVK4UMB+oOQd91vcBBpv4C6X2\r\nXy+A6MyhQ3CvADU6cRLzeWWcEd7FD7BtWva9Zv0KzDDs7YDHcM+TejSDTfh1\r\n6mTAvR4b4YBVWR9JjZTttMOVefnhkedyXgGfGqKFtuweABOzJHtQ01bVFECc\r\nNCKTeylB4hQh8jxfY3tEpOj1rG5u9Q61kQR91k+PYzgaAfmHcMyrtx5djaOa\r\n7I8EMBIaJpgT23BPpQsOOwOzFlH0Q4T1W3Q9IAj0z41RoNiSmzpdUx4fW9NB\r\npJEGTNqkJ33ZjWFV5h3LuQE/pe21gGJCdnBNXH7Ltt2UAoFJ5il/RTHnZm1u\r\nSYL/K5rBKyLfb2ZxnhvFE155q27L5AOirvY0XRBLP6Tbu2mcAUv3OhCSH/am\r\nwCiEq7Qm1T5L0coCL+3EFQQGC9MEvqAaZK79MvA8J97xcUJazwMaIuCuVfoP\r\nbT1dItwG6ohRUrRAxDPabHocVV0bVbuegwk=\r\n=W2ox\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1482-152.0_1652389280875_0.38609845139684773"},"_hasShrinkwrap":false},"1.0.0-canary-1628-153.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-153.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-153.0+3a4e45f","@bodiless/components":"1.0.0-canary-1628-153.0+3a4e45f","@bodiless/core":"1.0.0-canary-1628-153.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1628-153.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-153.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-W8wRsDi0ijZWrq1fHj9XtK7Qm1Nwl1fkuFVPI5BCDTWQWqKbdFa77ztXdBQJ1vtzaFaR5cly+GKVVnKo93Xlcw==","shasum":"276f447ecb58768f261daefdfee621b0552b0c5c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-153.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYp1TSAcfv+ztM9/m/njw6mN6mrXjxLwzaUCNzbF7zIAiAY1Q0Orriv6aFEjS4GO+GDvX8uQM4rHFySeE/mzn9LMQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifXzXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogaRAAjs9D1w6+sgMfMs5CM2ZcsaZ65MCVdY8tDfvi18BRjcZudOgP\r\nkGMWFx+Zql2V+iiNAt1vzYToVGMyZcJgjcAWHAdeFxis3fmsd513LI3HKZ+l\r\nbVg3H39HrlRcbnyDHsR+8mpHS0ltfxDRYsmzxuSKXgvuZwSwCGe8cuYZf0Eh\r\nwlzabz/nDULpdVx7WVWKlMqD0T0t/R3nfLn6LnSjWMUoVqyUr5EnxC76rTtK\r\naZPkXZ5YUwiqObBMX3G1K+nvlojwUudmYZdzqF1UBEU1XIFti4vpG6Av6QJP\r\nVp0pf3jwZDuxyjsf6AJR34zsCgvFyPMusgG4qgMafwF7tvzDAHL8uw2snsEc\r\nUzS55GKKHyfLbPT/7hKLjxNBmXwYCBvqY1DppmskCTVwRnyU8CbUr7LUIXWa\r\n0lo1Sf6pIbzgvMORVIXPKbZByCVSg3Bb4Ov9tBTYjDzjnCgtsrIb6moonuRq\r\niB2FgTpyKnurZphb04FFZwq/PetwI9VMfKvQ3rlnF01PGS5AmZpyJ2ZWQQQy\r\nQAx17sRDZqv44n4yqlw+im6lfo/moKEqbP/olLA09qn8V5Kvh2UVVg9mVDay\r\n7s59nExP01+moRCYbjb+cyxQhml1l91ubrPyM+V2lTz8Q//Mp+tvE5unAuPQ\r\n8Gb1+70YSaDnPAu2Y19sRL7irCw8mc5xDOA=\r\n=VNIu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-153.0_1652391127137_0.5195934556604163"},"_hasShrinkwrap":false},"1.0.0-canary-1778-154.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-154.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-154.0+3a4e45f","@bodiless/components":"1.0.0-canary-1778-154.0+3a4e45f","@bodiless/core":"1.0.0-canary-1778-154.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1778-154.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-154.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-5qnGaNPwaWYX1Eea3CiEFGT6Nk3jHBlHHQ5ECLxBHNlY3Q8M+lIe5Ds8u9/vIVAVtVVtOvBTw9ZmzcwYYfa9mQ==","shasum":"1e5d2194faff1d64f4aeda7b43995053d1eac0f8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-154.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCohGazXy99APB4RzLVrtGeuRWPhvepvLzh8sEgM1GzfgIhAIabTQirrHcCa3vfS9mKyDFS/elMELgAIZ2Gu2HCiAep"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifYyOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDqA/+IAjq7KqYjYG95qV5RaXZGVSpH2yWxj4e268w6FRSzyDPvEEI\r\n8igSvzLnyitCxsZ0D14z66fgEGKFzDMEKvZ4LZrUu5TxLy1J7Es2klz9pLZP\r\nJq2iQ5RNXkaKtZd6FjXUYTet2wW7cKjo5BoxTs4WDJCzIijEuc6PjPZzoE4G\r\n9eU8X5WSGeCcVVy5aYjD+BtF3j9UGVPfjm5v/WXYlgMJhZ/+nh+Asf1MgN5x\r\nhDMqG92TfqJxK01Pksq9TZbnViWWGCvIFMDkeXnS5KG0clLPGTEkSY6lm1Vc\r\nvfE3RTtBzzC93v9VgLRMovYmJAj27EQ04Uh4xiVHdEFMGbXSE8j3zzPlqzST\r\nRi0iQSn1l43JJKHYCzqbMqkHGFaeG9cloKWZ/T9PYH02UGc4V5HwTuy1Pnbq\r\ncGlYER7f1LuSQRdaQOSBpfynz3OF8kpENfxaRv4oq7dCNb/uoJgjIBS0WA5g\r\nhsokosF3mNsR79KLchB7SpkMhg6OQCUw2WZDzQ/U7NXu4sEFE3irXVVifItK\r\nzZvvbAZbLNNiojYs+gWrx9HCDhiPZcG3TdsZHu2sKFn2qi6Cmo3tPI46QaUa\r\nZEy6IvJ6+M89RmHcZF1jM13hgZp1gknxj3Dm9fuu//zVrpN3swid8dM6eBaz\r\ntjzRsmbhsWt52JbaJmQIu45eayjgTdc91ms=\r\n=jGp2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-154.0_1652395149909_0.350105122584659"},"_hasShrinkwrap":false},"1.0.0-canary-1778-155.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-155.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-155.0+3a4e45f","@bodiless/components":"1.0.0-canary-1778-155.0+3a4e45f","@bodiless/core":"1.0.0-canary-1778-155.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1778-155.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-155.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-oCC39Jt0ltEYmx4pX/YdVGkKqorbg6Tim3FwMpTAR7ZGI1iYaERxuEAXRAJBf3zl+Gm0XNGJVJd3GhDkfymm5A==","shasum":"d97dd667712f08cc5857c6ac649bca811735b3cd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-155.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd+/lV5d+8n7rdAF4sJtxeHKuF8+g3g8la5Af2k7ebfQIgRIxcPZOVf1hqr6GiM7Rb3Xjvfsf/KtbvnpnoX3IJRyA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifaZNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQDA//UcTYdCxGKFd4JtpYMb7k1gF7V/HkABFj4bpE4spyBVotGzMe\r\nsidHFdqdNNrVHmQZvxl7xcJdEJGeWZ3uiEFUWfXZndST0n7GWGKofqUQ4AIu\r\nwyJkrsH6ckJH7HfQRB3FgO1RnX1Ug7MKVYLLFNE2ac79+7axquI11uOvNunp\r\nEU7t61IDl/y+ymUQZ0+KGtay+ypK2FxQ9NC7KEX/UzMjAXWzLkErQS1YAN2F\r\nybj6cFNlkOtAwsa6tibcL7jL8AEaWavMMX+bLBUWpR3zeKVsrCSyLs0Z2Cjl\r\nXBEB1/Rls/Y9+aOKa/52ME3sj/h2Q0nOGYdjaeayzkLzsSEhvNnAXFOxGAFY\r\nH9LCFLEUzg3NCL/mNAeP2n5MKePx4OPXWXTTR5IyvYCHI2VLP+H+gd2Y6rjx\r\nj5wsNVcsi9bth56LNG8AOq1HUH6zoF2bU6SldKQsHHD/XppcoOLgJ44TFbnt\r\nRzuwF7/oLYz05r0UbBa0n7V8vYpUs90pl0OZ5aB5rvQf9/F1i8CZh3W96zjv\r\nYlmayTNOZHhYcaflaoGVdEXmiyMNEBuQaR5xZODmsxoDiia00jeefnAbN76K\r\neLoihjJEOpffLZ9VXJ1i/ghYKF96f2bRml7NLRIJ45zl0x4yCSj/Ny1thHCf\r\nAf+K1oZOeORj7ZQ5Q8Iv7okpZL4qelU/vRA=\r\n=GL2x\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-155.0_1652401741509_0.08629477743428504"},"_hasShrinkwrap":false},"1.0.0-canary-1781-156.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1781-156.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1781-156.0+3a4e45f","@bodiless/components":"1.0.0-canary-1781-156.0+3a4e45f","@bodiless/core":"1.0.0-canary-1781-156.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1781-156.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1781-156.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-0R2CZ/A+6msnyqzUsNuQW09HksWQsciM2Z4kH62wbomK48nue7idlCTMuqNZOG8dzWQA4vYww/YZsPQdo77nyg==","shasum":"1e85d520a03c2f6e7dd27f6ae20b642d4f9e0515","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1781-156.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaym60StDoJAJBkzmzq4YEoo5XJ5kuX77Ww78cZVsE+AIgJPxKQvyI9jVXXV84TMLRXbBrMtBhyxJDUlbBkAfK7PA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifaayACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoLw/+NbIBN09csrplz67NWNMUkrYxJ1vLJ7sp7K328mawyxKi10yU\r\neFU2Rm6kWB8zQuAqjRhxQYv2dd2jX2eivZIZj2oBpX5dmzDdGAAw7sbALrvz\r\nkZcWZyQL8GZ3HjDxL24jBoMS66Ps9uocQBdIEysV8QREqDTR9QdyFNFEae9L\r\nqp2lkp4/KiJmv0uaqp+5KIVPnz8bWk8h4XAnsPe6HN9gBDD4kREVB5QvhURf\r\n99znX38rzwCQJSXdUTGeKejPPJuT+Ih/pgtZMoKBNuoLND7h0Uyf+OP0juAF\r\nmDOhqjNNWK/ggSRDBES9znQOWEOMYz68y+OElNXemnkoRAmok7Cp8gysDzjL\r\n4LW4cA+laIYmspozogxMDllu/BUCkUXfpqpwdRT4WO7jh2vsteHNVTlC0JNW\r\nvH7uELxEcVjnFjQM2QekkODaZadeMD95rEs3ddGEVEmujVn0CBKiP1c+QsTs\r\njR0wfQeC/krsnMV3akCSRMx/MPmpdjkgg+aKjQSyJO/Xf/99bNK5RfT3uwzv\r\nkoftwSuDDTmN4RsoMCPi9rGBZoPSinvZzwqRjpMiryBLojzmZu6lKN+hN8rb\r\nzWe2q+EbzxRBRHxmlf1oAmmiVusmk56aEYGIsDvCSjEFG2kVyc1RaGcyfg+P\r\n6mBE+4SzBHP/moSyNDtfHCByV6a5/ITSldU=\r\n=Hirk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1781-156.0_1652401842230_0.7928952783369558"},"_hasShrinkwrap":false},"1.0.0-canary-1500-157.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1500-157.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1500-157.0+3a4e45f","@bodiless/components":"1.0.0-canary-1500-157.0+3a4e45f","@bodiless/core":"1.0.0-canary-1500-157.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1500-157.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1500-157.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-C+mv95d/LZ1rUAkTb7ZSsbFxrPFSM28uL68u0LN/IX/otzLnIrf3P05pRbpN8EurI4Dyjv9ssiYuQg7OArU2Sg==","shasum":"24944b83ad5a0df31120a0cad6ed31c0bbeaf547","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1500-157.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBenSELyaAi4GvXHlo9wgrkrePaLRRDuDYNIkLHPmHVoAiAz5E7ilS3g0vB3/ObgH/p6M0oBIcu6ufI3oV8AGr3cWg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifai6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmplag/6A+pMRd+4l35DuD8FVb5RhL8vqHGLHsAMsQRjKGejlDYKWWH2\r\n3+9Dxth6NscDgfVSmoDJ7pmKiz5kHM3pAmYAS2cjv+2hWMv3rnrE7WMlLFpA\r\nBxe76X9lTEn7BkCNuX9C/huMGPUWRErRHhcDusRvZ4tEPySzS0f4U2LIO32O\r\nlz35nmwFYdOhlQocQjd3lm6m66vw9RGCrtLThILCMrvqXxInglyVgvA6Z1q4\r\npdPs9/JaNWptB6Q7l9bcv6rQvvo+WZP3n8Id//x5miRmdrYS59dnFcnYwKTV\r\nTaTYlwt8kLoQPpUe1W9gvy8lOBPH3RoVyEY0ZaekIYMLmUCHKqiy5Q3xja8c\r\nZYLhVswAJEecoXmr5ifmIMKPX32MZXz3PXaVXEqoE4NdZuyi5Z0KTUXAZBLe\r\nHxH2fUPcHujilhfkcXFd7Wnk/jBISojKzR6elm6Q7R2aDkB9ZxtmKw5N8mG0\r\nF+tNIv0fx0/1Wy4PYjqt7loXOYIopT0yXqOYkMgD0vGvtZ2PaF7HM2NjHr1B\r\nJMJp7wMf04a6J7flxohfIswbtLz9olMQH/Q1BxO9uk4yJxnoBUCt7XNa97cE\r\ne0+Yb0YfCrvrpW5uV/kjNwwJ3udd7PhpgLG+wb+DRyC67I0mugzm5tyxlnqE\r\n8OP+A+dZ7NBNnmF3it6t0rpqWzxVUhJw80k=\r\n=C6Bk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1500-157.0_1652402362462_0.8172344007245285"},"_hasShrinkwrap":false},"1.0.0-canary-1778-159.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-159.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-159.0+3a4e45f","@bodiless/components":"1.0.0-canary-1778-159.0+3a4e45f","@bodiless/core":"1.0.0-canary-1778-159.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1778-159.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-159.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-x6AyJ4tsNQYwkIjzoW9TesrfU10C4WQg4P46/TdI/Gj/+YSsKpL/OweXWj1yeqmjXeIxs68spmravhJ3nEfUSA==","shasum":"e24c24fbde2ce235dd7bf0193281cc6f50c08212","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-159.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBrB+cvC6M/QMJK7jBJvfTxOc5FaP7fyITTQ9o+0MixKAiEA/gv4Gg4mrE/uee6yXjjcKrnyA8M4bnSky4Okb8pwTGE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifakaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNkhAAk+bQrWOglzFA4jBbZftjIFnnsGDFpf6SFfv15J5Q3uM5ecgv\r\nM0/lr5gzmIv/PxAS2QJ7ErK+7r5JLbI4SWBBaSQQwdzVuFPRCCGDrpK+SKR4\r\niYVLxBGevqkRCYcadtoOEKJWug2emjMjwE/WHySCTupUB9nWM7atXLVsUGga\r\nGDzM95B9NDfb8vQPDfOVk68dsEEoqALEC9Ccv1Rt5p0YhXIWH++BJrbnBL14\r\nipMp34eDDPzd6tpS80y3ZpLKna+NdX7SfBcSJwqaSXl0aeevEpBc9fFKgArZ\r\nrOuUqQMGBXllQ7kZj2l5F6YqNEIKXSbol2Shnj8v+NzcUr/IXaaK5ChDd/dt\r\nYokf7YmIsQV9bX33q2XaO1AbTghY0ZmQ9kr6KeSix1Jlg3SpPRVrd/DaQ6Mv\r\n8uSRD3YMjoYO1Qe/B1Osrfi982rv1acyhxz2/nzXm+tm4BnAh0trCjY9g3Im\r\nW2zGFeckUxwWTi6il6Di6CBzEK4HrLe3KPQHWiv28hLKxMCPt/qsZJu2CoL1\r\nyrbtjcAnM2GnMBIqKRU03upyGCn6s2+3qtB1aj1+4tZdp8zAa21V82/PJ0vl\r\n8jRg+2cuqVe4Drz6bxvQDQ/Mjh9o5l1JXZKLTNTUlLLtH2k0sKC2Bi5cNUeD\r\nPG3BKbLo41QfnIf//3m9nCuNyJd+kiZt06g=\r\n=yjUn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-159.0_1652402457921_0.5743416902173353"},"_hasShrinkwrap":false},"1.0.0-canary-1778-158.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-158.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-158.0+3a4e45f","@bodiless/components":"1.0.0-canary-1778-158.0+3a4e45f","@bodiless/core":"1.0.0-canary-1778-158.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1778-158.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-158.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-RTrBoIGEKFjCSD4OeZ8Y2F1fY/VQuu+RPhObggrCVmGPERYfxBf7aUWycf06tLeYoupoq8p5KZy2BXyaeHUnMw==","shasum":"9c1f3814711ba798f3ac81e66bb1951618fa5dce","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-158.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCds8GUCxF32kFPdhBp64pY+S6ZCF0p4yNjWIMU/k39CgIgSB/jAvN8uij3o1dzvi1sqjwumnKIxMCAiQD25KQJZBo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifak6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoblA//doYMKJ6rKervjY97vYB7Zw+WKB64a1KGxmDPzagIKlO1ccnM\r\nepeRJmSw/4UT/dZ2AfejsJzMSlYZViz3laBWMzlXDRCgQE8NTq7wOV+y8Ju2\r\nyT2mdxr3VP2EPyRB3bXJotqLUANEqF8bMvMjJETH7EoOV1dTbcHyy04bPS99\r\nyLs945YWu6jDjPpflsM9pq6Jn8lkGgiMOIHQDZrgUiCkWwZJQYKFoRBhijit\r\n/B/9SzOm/65rCTVH7UVzgROcUFCnjw68v0MWstAbTBFfx9mxlULQXpTGFuKD\r\nGluQS0degN+4ybmtaQt3UkEt9AUlZXOI9a3ugq2KSHlbkHPfwQEZO1rGdEoY\r\nzvjh8pNW/n1SewcCGuPZW4/g/VFWpwjEx5QL3DNyDUHoeUe+IXZBxktwtfOE\r\nzQPZphbNjTxaKA//5qEUcKzckBk+8Wg+bPzQv1IHJbzlDSVwGds6Hps1msNG\r\n3eNGBmtCyHqM2ERs7VOlk61GR1IoiZH/wDgOfGqkVztzHsSZWJiEaRUSqHsY\r\nWkkL9uGE19NEZKawRyLnxpP+8iFjk18urqaxenXxEx6pRtyH0OQnR5Ne2CQS\r\nG4PNWeOlwocorUv9r/tVXsSXPOQDOeDqV5ZEZFhvCsHN7+YT6mpIuTWg0KJd\r\nfNxeY+rCqASNQOBj4Xa+Bb36ID+7zBb4Idc=\r\n=xIVR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-158.0_1652402490414_0.7560727512174614"},"_hasShrinkwrap":false},"1.0.0-canary-1782-160.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1782-160.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1782-160.0+3a4e45f","@bodiless/components":"1.0.0-canary-1782-160.0+3a4e45f","@bodiless/core":"1.0.0-canary-1782-160.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1782-160.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1782-160.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-OuDKAEE4wA4CN3+hwoMnA8vcz7BPQSs240v6p+zAMQkFI5xKP1DeNakGylDKPS8qBANB41OBKa3sjN0jUo9xCQ==","shasum":"937f354f5ae966f3d47b685a7d75f4550d45bb1a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1782-160.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVvn7hwVvRNr6FicZCFhbMmu7Q031+41JPnuDf5htgIAIhAOfDXpUMTEhRTjSYq06uDlDCFQ0LVrafxDJdr2O2BsYu"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifgomACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAzRAAhhedz034BFpS34s5l9iQ4wYsWnBJcD2Z6h4Qi0OCSvoMEORr\r\nliem2gLEWXZamuBQQ3A3tTsRwqqlt6k6OT7HTNjXxErvl+NflcdR722pOpdq\r\nvbbgY8TZr/7NjUlx1bsOQcyl85HYGjkKOvsyjvKFSXeI9WxgmRcvBr6hrnbu\r\nGhjsJFrhJWGUAOna02oDKynn6nY2yspNsSoamt4oFndYXMjl2TLbh7BjLuMw\r\nXIr2CGyrjNfozzx1GWrKWwtPOBjm/d5l5jZDgvYdTQzOIJxU+CJTPmhaXdXL\r\nyWGoCEG9b/KpDzG1jMrb2p+3366WXQT3Dd4DGbiMnk/UHMFGD72F2bFni4Ld\r\nLIW0PmInkmD7nkcs7HFkhojrvI4HYWt3w+3vZdLiQXvBQfqWodrbfsU/SFWK\r\nQaIj7XkQn/1Ehb6SS7cEpeBQnOT3cWvmrxEyw7CahhauERwvAcea0PU1vqmU\r\ny+EKSXFKC05PDxnRvntPqseIZVYsD121llmkNGHnW1HI1FMIQTbbqf5D4CbM\r\nz3ZIpZzct7zvat3H9R8fyTIARVwcEUh+llATm8ZDmn3SI3roITs1Hd+3sDjn\r\nbT/mEX0vjSGecGdTG6+hKJ62tC/DM5cYR7iAiVaOBtI/5d8bwjFxTKtRjyhm\r\nTdL/vWQ2iafxOupcW7I4rO9TDmzeStXNsXk=\r\n=BKaE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1782-160.0_1652427301835_0.8568335239621698"},"_hasShrinkwrap":false},"1.0.0-canary-1628-161.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-161.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-161.0+3a4e45f","@bodiless/components":"1.0.0-canary-1628-161.0+3a4e45f","@bodiless/core":"1.0.0-canary-1628-161.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1628-161.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-161.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-VBWqksewN3s2AWdUHJaBeFn1EAH21gQOysDc4upO2bpTtvd7atF1hcaATIWS5jLCWnscdAofRWu11LjKFno4xw==","shasum":"fc06803e151882839750c7aaeda3da4375b3cca2","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-161.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4wWKJ1mtfoVT0wwcyJrKfpbHPMtCYfSExFa/kOSXYfwIgM4rsM5TY0khmy5Su2WF0SSSMzJktQ9oEJyNw1o+iXqk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifligACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIeRAAnUfQa2cerhTdtG8bQzwh/riMlE0AF+SYF6c0oB5dxAgk4/G5\r\nz06H0Nqyz62QhCU/Qor7HpBxqr6USCtCHyS+uCgUCGkAwqA4tlWS2iUsSa1+\r\nA1uEWMJxQ/RpUmxdgNXaw6GxkD07SkCsEHlH0f1dVzPlshNbOHqgFd5zdK4+\r\noWcDrb6pr9svNuv6fZ+Gk3NYQyIHamtLjHau2SA40iIN7J/RbakflRTUko6q\r\n8eiJylWcHq7G+jVgk8DfL15PueYcrxn4a1jWuEemFI5phqoxE8ZqX3gbDsc7\r\nTTPFCxdtl3OGlo8MnUI8e1xYhHzl/THqwIt/Yrvs+QnG2fhOKOWdTj2vBCUQ\r\n8IadBjLr6HZg+wlvBClDU+Bx4QzHj+RCmImDWxTG67m7OnqnKgxGfvhw2Xvi\r\nnuYG0zTO51bfbyyEcwD48tloUQNJKm4o5hh8/Ndy5/Y1Bkbrd+87v+Ybntw/\r\nQSlCs04/l0s7gqAJnPVAc9nlVWOww7kxU+kk8vUEnIPt+jlXvkV+IWMwmLH2\r\nbALLJ1/449AI0GUA1nKhmOui9fm4A08/t093cNMDN5at0keZOhDjIgLnVk/O\r\nHZtR5MxsXv2BDKwQgWZJXC1TEwyKzi5Ok9PCeI7BE60fZD96SfToVv7+dPCJ\r\nRcd4yDQfzA8OTg7PtjrbDcpp7Q5mASdRP9c=\r\n=tO4A\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-161.0_1652447391754_0.7148973593218308"},"_hasShrinkwrap":false},"1.0.0-canary-1628-162.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-162.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-162.0+3a4e45f","@bodiless/components":"1.0.0-canary-1628-162.0+3a4e45f","@bodiless/core":"1.0.0-canary-1628-162.0+3a4e45f","@bodiless/fclasses":"1.0.0-canary-1628-162.0+3a4e45f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a4e45f0c5de024ddd40548b09287eabff793f14","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-162.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Ic6FpQwOF7RFMi7+gw2DlO3SXWfPYPeyCX9f2tAWQ6/B/ko0iZTp4LdGhUrg9YZXAj/OAQJtPeZXYqj25s0Smw==","shasum":"e622bd64d92bac7c13ab15ba2979406502c1a5d0","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-162.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAirXX23iKbEOCS7RXbHodcKrcelcQmB1nUQK0MGHoz8AiB326NnrCIRTeqFPCfm4EnEEeT+4irLWkcGMo1YWTEqoA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifly7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSuA//R8ciF5wUuFDNzuHonGBHmDpBmPWgSqrFKCVDbfmUTxkeTp+f\r\ng8Q3d9DD58ZBpgR++yKIp5dLSZgTTSkg+NAoJTbi5Ino/y7f9GObkWr6iCXK\r\nfmHOpbqlDp0oYZIiiFq1Fe4xhYNzXaOA+t0ByV0rfZx4aaefmZ1Oyc+AndrY\r\nlyLJ5psjwWO/Z/ZTLIp8YhApZpvS5A+EudbEhwk2e6UwYGfovYfZNEZaTO/N\r\nWQ4tlcx1rE623J5/pOvxiewq8s2+686OJnWJVZVL/5qLVWTz2n37X3nQ3qzm\r\n2zQZhl6PcL4yDPV65iFNhTaGQHUSANjIzUTLXM2rpeddO8WYVsOop8SiHhO5\r\n6vHr6geIIN81NsJlwA60NnnakjX1EXx17yUuvhb60NswMKPyI9lWlhOx22FI\r\n67oclD6HQw6zHiChVM3ZEH6DHXI2sadRMEBC58Ovf5o0D1ees6yPE40R7yep\r\neLUCN8OKgD2/KFq2EHlOnR7WYYpC60RX43ih5rpwk+VmfVj6qSDCcl/lw6it\r\nhLK57sap62sRFKpQ/aKciONqnaI3sPnJlR6/AjMFQA4INToZqK+oNx9vB8jH\r\nTBTnVJ05kGcUaq4VWNpsDiV0XGb3CTEj1JjoS8fKtcSZmwzP4D8HX5OwfZLC\r\nSPAnf6rHr82B8yHxOrDyNN3lk2g5fck66IE=\r\n=TtlC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-162.0_1652448443542_0.8230268096629079"},"_hasShrinkwrap":false},"1.0.0-canary-1776-163.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1776-163.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1776-163.0+dbe1cde","@bodiless/components":"1.0.0-canary-1776-163.0+dbe1cde","@bodiless/core":"1.0.0-canary-1776-163.0+dbe1cde","@bodiless/fclasses":"1.0.0-canary-1776-163.0+dbe1cde","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dbe1cdef40ebf9122f46c4fcc341abc89b8e8760","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1776-163.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-E81lnig7ztdu3f7uFPpwWhRDO+D1yFdCRUyEQeMrt7o+8mKTwYvqphXgKvQ0Nl62LpyQwbAy3LusOC2vZOqdzw==","shasum":"01addde670f99b69b938d79ab97a2a21918f90cc","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1776-163.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDr03k0whVhXiMmjq6X/z9Z6eyldyZZ6rW97Zevob54pAiEA5/Bb1RPcJlmQTiZfkSRFkEp6bG/dHhMQygFfI1J0WUQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifmKCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAqxAAnVeMEhkCuphwTIkl6fzX7nz9IuZUf6ZW5ImbT2XnsMQ84XZy\r\n9fn3MEhjMBgqRKg9yvPKY62JsTzocHFYJtPBcXeyvo2p6cDbnhjb+d/qosgb\r\nWlabNWgFe49ElStrTumDqUwa0htwKZ/GETBgWJe7Hpt9gWf2CWGGvfBaZCKh\r\ncHL2MjcN9q0MUCQRe0zf8SlJSMx7jFP1Gl/8jc+oXErTtdFRApT9Oytcp1b3\r\nosDbli5MBy9gmx1EApqXrquXrL0cWnvHYDUwLgq/x+fxYTdJS9oMc/RdN6ZW\r\nqIFNNfTdqHiuiYC/3LZEoxFh7+mgaA4r0J6IXi9Fb0y3H8moK6VzPlr2Z2v3\r\n3DY/pHV26OXevxsULTneRSCvj/dqfdK2eN357JvCJkWP0zxTqnB3JgdyA7Ip\r\n9dboWD8DZtCk2pOgiLJQTukWHjeLBaoDauGq/LFmqmp7ntpv7YI7vtooTSAC\r\n2LmEGgaC7Mir1MXKi1+BVt6YyiZgRXD8JFYiUBKwL2mHTpWo467gKft76IE8\r\ncAiRWQE+wH/Sef7XM2+WpCb+/qP6aEvc/ajN7RhbbntrScbGYN+IVcEYPM7I\r\nwAR4BuVimiRV8C0JuzwStIdMg7XpfirAIb9aNNYMctt+ZYAnsid5TkqpOFZz\r\nauNxHSyK/HEGWtHEprptR3OJOzs99imtiio=\r\n=VBbc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1776-163.0_1652449922017_0.5166404293724893"},"_hasShrinkwrap":false},"1.0.0-canary-1781-164.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1781-164.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1781-164.0+dbe1cde","@bodiless/components":"1.0.0-canary-1781-164.0+dbe1cde","@bodiless/core":"1.0.0-canary-1781-164.0+dbe1cde","@bodiless/fclasses":"1.0.0-canary-1781-164.0+dbe1cde","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dbe1cdef40ebf9122f46c4fcc341abc89b8e8760","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1781-164.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-qAPKOItw3+eI9L/l9vX4YwLsm54UFHAZHf1mLeoKqy2TJeoz3t1IqU8oyGchR2z1y6bjWWGvQ1Ns5vb2TJMejQ==","shasum":"c89f989983fd8ec3d03f30c5b2010cff0bbc46ce","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1781-164.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCafIJH7xLvyHmAN72MWQ2+B7D0dAzgpSVXXzMx9tH3BwIgPVIj0Uy8cX9gZ+RqGehTC4ZTLPKzbwDFLUOesKwvBe8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifmf3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLPg//Tqgzm4VMjQ1HRkVAxU1MokCfonbNZxFqtNgJvmWniB3V+g8E\r\nfwo5esgmYl0dPaciwG6tLCjLN7oSY6YZd0KUmwnlYZ+wZBbTApYXegi1O6K8\r\nayupwU8RXAPEcL8yPtxjUCuWAol4WFeUrN7+cdGw2T6qqE/uw5noDzJOmi4J\r\nLVvOkcxknGuVOGhY6kgwXRO8X4VhiTGjgZ8kFEGrknQA0FX6/VYAtq4ZLu2y\r\nk7zSdrTiDcMstku01jFG/MDXvVJ0XOPfv9UvPRVoGUTf4pLZ3OB4ouhlmuBj\r\nfKFfdzoFt1EFsS29DQDbfNyJZKtbGYKrLNQVXcSb91qvuOkI2wo1Bv1fYFmY\r\neg3mKnsbfcpSa6U6CmQDjqjEEboDwUR5o8eE73Jhd9SM28h+CCPyQyXj4L8/\r\naHzkC7lDxhUb32pfRLugiJZADn1IC/RdEJ2JaifVwM2xIPgzz41jiq6iHmAb\r\nNx6w/onTh+OZAauzVXesI3inY7ZPrjM+chvwc3Er4dbPEgKe09UW9GTazGu/\r\nhGJ9QiqHu5DsPZ7nzyEG9/jEjZNm2O3Y49GnXjfF1owZFkNSjTJtd/ZjXQYE\r\nC2cqZbNDoPC4eWyG2Au5s+vGc/YtcuXMm3V7wqfxSkISBaFhH4+N/9Lv9wlv\r\nUeyDhE2YGquUM/yi+fjaERB6IPbIozwlcf4=\r\n=8UJ0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1781-164.0_1652451319310_0.8850900116931353"},"_hasShrinkwrap":false},"1.0.0-canary-1628-165.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-165.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-165.0+7519417","@bodiless/components":"1.0.0-canary-1628-165.0+7519417","@bodiless/core":"1.0.0-canary-1628-165.0+7519417","@bodiless/fclasses":"1.0.0-canary-1628-165.0+7519417","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7519417eb3cb99d03bf7efac8013b1d3f7740f5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-165.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-jvsNnJu0YmrmswrJY42TG3NgvOG798wst6M3IgwrDN34fWL1IAfn4ikgVLai/3LKYfUjYSzyASYAGpWGG0c++A==","shasum":"f4937118dd7d3b70739aec414da9be40eea2c538","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-165.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF7Kt40IkxIPNgt/uJNTjZ8c0n9GaHcNQv5hAGjxBbBtAiEAuoxW88e1owenMzB+y83yx/qoHHQmMAI6QGknsFm+MQE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifmi6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqieQ//fvHkt+Q3ZNjwILtEAYbrZ31oxSTtGYaUW6hueMWQ08irMf/W\r\nrqz8hOl32+Bm4uv3miSK1Pc8JwLtARSk5KuOXT36PObmRlYKc38qY9ULxRjv\r\nSpt+pHq94C5whsbgoS9eP7NeZlHlFpOYpiptxArg0tpx8cJeZz+sXYLslKr7\r\nUoqoxRWTVAxqirc45C7OTgK8Cl6ipMh0D372rikgcGrKhU56xMjcNs1qsPLu\r\nDkaBbvXk2g1mHqeCW/lS6srPeBNdhe0ZSkrMgJqqYQu8JFC/SVjQDiqpwps5\r\nRq+R+Qgn/iv6Fm7454px846eBTTskxadQrvqrQFBjq4LJCKCG/DmoD4GKJWw\r\ngxrWD71icGNBZIAbCa9LsuB2QAqmdGwVS6eGij8gXy02YEHfseSEqv4/Q4jk\r\nGu1OlwZs+5tLNtpUfstFZ+1gITE464vohmli1C1F/KmfSedovxKTTGgFkaPj\r\nCprFBjtJ1LwDjYPaBjDCQm5BvyMx321+ctnyWRyKCb82N7hP5vjhgBYZ21u/\r\n9YEbP3Hn+zsNq8U4dPQNQHscHZJvTzyg/mSyATPv+Gsngcx66bOvT0nyBYig\r\nIuGNKVBi4n7u150Bd7BNLwn3Wg0H4ieMFOqrURe3V6f6DKgHmJaro2/DSmCb\r\nNaXDXUJUdfaD6HlOmAeheoZGvJL5o1gnQZk=\r\n=V61t\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-165.0_1652451513835_0.6318724614932056"},"_hasShrinkwrap":false},"1.0.0-canary-1781-166.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1781-166.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1781-166.0+7519417","@bodiless/components":"1.0.0-canary-1781-166.0+7519417","@bodiless/core":"1.0.0-canary-1781-166.0+7519417","@bodiless/fclasses":"1.0.0-canary-1781-166.0+7519417","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7519417eb3cb99d03bf7efac8013b1d3f7740f5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1781-166.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xFHDHWPu5Iz9HthVYnd6F+NFaqR1jeEi0x7aOh+AE6TOUopW0PyM2w/yxKNe8/L8scTt9Vw/KF0Knqb+NfrKQQ==","shasum":"dff179f58d87c714dcf2af0e725c6c8d5cd046cb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1781-166.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZK2IwWKDfDIClRXmO7jaFxz/IOWbDpyF6V1C223ogSgIhAJ+IK/adOJ2Fu2hLfNJrrCrxQsP2rylTk6E42IdR7BaO"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifmpiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouhA//WdDc64uiZ6hJqAgBRoypj+863vjOyx71MidV4DRM0rSMBTnB\r\nC6ngNYDhtqzJkGJZuOUkQRLDgV5/0crKT2X1sFeu6iZqXEFtYB2Remt+rBjh\r\n7EtNbYZLt8N5csIP8BF7lDBolhVcwsL0m2PKlKQ4WxwMsxARU9PMgf/PfDi3\r\n3UllN3gJVTWeYZbVkcp08Rt+fbTdYZj7JgyRoYreFralkDCjT8mqFzKYJzc+\r\nz1JPjKRoGwXcxQ2N08djUCSuT9EnO4b+hw1Hhb8+u/1g6QUaaUtrX9ZO8Sn1\r\nLfA0PiIkgzpuo9BaZpsVkqr1U8srnCsDovOFoCfXZWS2F6qNMgP0z0ykMXNj\r\nD1QipXF1e5DGYiNpjlPKKhHEnS/Cl3U/I2U3CQzwObIRGNGnKVi+LghNpniJ\r\nRZk880NvCMATjWRxLj4dO6kOpFA7zX7Z9XlIrg9S/s5v/CI5cx6z0Sc+nIEA\r\nW2V41SBm9WpEMoqD23Yffhs5kJAy9z1jy1IPjhmK6iITqctnbAN0N0rRClu/\r\nv0NGUgm7oEUXYWSYSmgRq9scgcXINEN1VBH3Ck5vXeFn/+9dNWVX8+XtlKJR\r\nR7SglNRkqV6dNePZnLM7NuhsOP99w34CleeGxN85sPzdBhm6FPuwAxaOz7+e\r\nNpN7EDkCJ9Gse3NMjIJKu2MNrIQJa0cRd7w=\r\n=qJfF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1781-166.0_1652451938164_0.7135186146140804"},"_hasShrinkwrap":false},"1.0.0-canary-1782-167.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1782-167.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1782-167.0+7519417","@bodiless/components":"1.0.0-canary-1782-167.0+7519417","@bodiless/core":"1.0.0-canary-1782-167.0+7519417","@bodiless/fclasses":"1.0.0-canary-1782-167.0+7519417","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7519417eb3cb99d03bf7efac8013b1d3f7740f5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1782-167.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xE4Xc8sw0vsG/fgzePCWDoz8dEeWKPiw+/TrRDtrENFpLRhapbMbzwEMEgseRMhDUHDLjMfk7MOEZsk4e8oJtQ==","shasum":"3cbbf74448dc00dcfe740ff659776e8635d2bb4a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1782-167.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzeePr4CnO9ZCgS2NbKiGn2ZUEuGahSURV2jlSLGIDuAiBxxl9PCDO9B/5tZyYQgF7dZjCj7I8PrRKwWltBN6c2Lg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifmv5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyGhAAhi5DEP5aXZy/NTlnYeKBUShBtn8I0Qd2lFouY2fXjpkz+fQd\r\ne6B+oJ58ELjRkmIKZTE0HBnhCMBbjQyrokfFGYypMX8tTiH8voQKAVHWyLcz\r\ngtSMFOUnTwB3yAJfff8b8gZJAbHVRjgHfnJFYJxh6YMkxuWslZEQ8Br3FJye\r\nTp9/yhpncO2stUq20cIKjaE9dWwF8wA2K3ZA8mSriHWeo4vSgkzVVZvyzYlM\r\nYS7g4Er5rQMmkMbwe79S1mFG6mRTC7iRIo1fsLPzKfcMCM75Hr1AA51jRScJ\r\nMvMq2cQnhuRDSWKvR1/396YejCPDkbZROCz8ZxBHKamjxOK+9O0fLG/e4IzR\r\nr+k5BCeebEp5wJDHJqHyMzPhPG7QnG9KJp4SbinRojDI3FPErXbtWlVCCe81\r\n/8k+ShhmHgB4VstcdJ88ghZBSrNRFGAlqyeoGYgz/3gkUl/etkjTeeXzO2Tb\r\nROyTMCsOCUf347Op8cLkWBBbpEINoc5hiuzZ4bUR503wQz3tsPiV79GTSc0I\r\nYjZza1Q9ojTediW3w5gz1dffCGIvNBxH53myDfqnfaHgUmnNZtnQj5xERPxW\r\nah0ZDRyCjc+HKKvqXRg0+JscXx4MoHk0I+BNjBu3hCeAdlbM0BzRNvqp7Vhq\r\niAPBLHbpEDCxuPYRLZ1m6jCW7RK63YPFLGA=\r\n=+D4b\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1782-167.0_1652452345152_0.8361423348857986"},"_hasShrinkwrap":false},"1.0.0-canary-1730-168.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1730-168.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1730-168.0+7519417","@bodiless/components":"1.0.0-canary-1730-168.0+7519417","@bodiless/core":"1.0.0-canary-1730-168.0+7519417","@bodiless/fclasses":"1.0.0-canary-1730-168.0+7519417","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7519417eb3cb99d03bf7efac8013b1d3f7740f5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1730-168.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-OihguCxuGflLlXJ1XYawSq7gLSA9FFMJhOXDev9GSFe2tP+p4uVgWYQlxgxAnY/hpmLzHf+n+S8E/5ItvWuo9Q==","shasum":"d4f63d063a7b20310eefd255516453f57282db29","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1730-168.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCh0R1RV3y3G8UxhJKaV33wr1aXqj6n7WJzlbn9Vw2DawIgH+ZFxqjsqbGh0d3dl8m0DByDVwRZbVTv5CfzUXF+z2k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifngMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6rBAAlzOHcm3v1NelOQjqK+QeoyI9wvix42hPHFaD1OorUH+QcFXg\r\nD8RTUfNBUQlnA2bOmCJBeSOJfRxI7ub3yRpZHfMYuYledDDGbpQPaQSVub98\r\ntoiryZ+F0+x7Ggob/Z4gz3wC1Fjbv0n+y5fU8Zdh+2n+AUxNgq5ndZzA1ITs\r\noEqFtF/nNrFuKTLhpg8kz7jN1zmWfR4DE/phWexKOWVJCoREV6okdXEAAC9S\r\nlfhPwS2E3+BZc81MwyB96qMfGkR05LWL9IkkU7OsW8F/GRN+/x0YH3+ytvJr\r\nswZZMH9kxSvpCKBakaAgx0zLk/IVPPSWQI09Wj2oJ9gUx74XsWwxVQh1AvWo\r\nEuipm3mttN69ltGn+qRfAv2YxdAROhJjCHqZdPRf+oWQkHGp6HswxJuZ4vJs\r\nqhrSdWiz88TgiamVHf3VJb6nSqiRSzN0nUQPcRFD12IZk+NaOf6gXf1w7CrZ\r\nmFvA6YDePVMVjeD+qYhDs78VOkyr9JcQuvIgbFkO6YXaMuLY1yAotZlbGjNP\r\nBC0BUIupHWSfzExkc0pBNSLb4VC5cC8hGx4CgLZU/QC0R8ZlejFFLUVFxEdM\r\nUusuclyja+Mg1yoh7NUVQO5ZVX72p0ELIkHO0/FBvkFO0DoRTlKcM2hTe1zp\r\nZUyK4/NwQFb1IPLhQGk99b2zDHwwwOVs+pA=\r\n=QnPY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1730-168.0_1652455436473_0.7262032453589067"},"_hasShrinkwrap":false},"1.0.0-canary-1775-169.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1775-169.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1775-169.0+7519417","@bodiless/components":"1.0.0-canary-1775-169.0+7519417","@bodiless/core":"1.0.0-canary-1775-169.0+7519417","@bodiless/fclasses":"1.0.0-canary-1775-169.0+7519417","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7519417eb3cb99d03bf7efac8013b1d3f7740f5e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1775-169.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-elsxl51THWvtR6f/DSDQZyspzXJ1bsZ+ldh6EBXmPYfulYxvevVuDnK8P3QfUFXze3iNOT+Pwy2fu2W+GKjWzQ==","shasum":"bb7c6d73b02cd047330544a98adbdd168f1aeea3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1775-169.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDV+Qf0hSqu2w3TMTsu3e/R8bUJDafT+ZATC2e6Z04/mgIhAN9nDoqqsQ514/fmiXOp+J680apsJpOwpvE8H00YgGeb"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifnmAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolzw//cIVcoj3adrEs3OXFu26GbMwdB3DgP3GVL42nlz2TbqNkTfvK\r\nn6yq4QBd4K0COPxquzAuUM4BrFoa1MbYEMOmvpGOD9U9xEzgm6lcDTtekh8J\r\nkEbsMCOtKe2H+fyico9ZAMT455VKA4OEA1r5mOdkZDCnBPuyw9P8UUkCEol0\r\n2uGvC0SCRAKjA67HxF5fMG2sun8sd9ifXLG7KwgEeX/zYxDjZGoyonmkjQ8x\r\ngRrswad2ZVtMAw0HovJEzAXOdGDVxJFlvpwybobtIlvgDEdjgGfHiQabWEQx\r\ncGD9vX6B76sBQm9puR398fvECkZ2GlvKPM7krrY8g1M0kXoC4txvv9hO/eEO\r\nTLhwR3FpUBcu4ECpcaE7pRxy5vpjx08H7OF394PpXpmES5lr36XyyFjVCr3G\r\nwRt9qI8xIuv2tsam4OrYo4uPLAGA5Lsqkj9IRCu+FYOUc3XuYWXKgYvIIrko\r\nlU3JAb+AfZoPG6l65K8SGeK40KfsqwbwHs/5hZKYFEC8tiqPparoYQ5qWGbC\r\nnt12d2K9PZjFDdqMQOAW1Z+IcTLrM4y6ZsoHqItssUJ735LxUtsfHsajaZAL\r\n3D55ttGFccs8mpNsMP3pNECV19poWD3wGw79855X8UAJtsPaXlxqf1HVszV3\r\nG9aDX2qX5gTPXvKm/nqjcowH2bGdgxwsUyA=\r\n=LxgH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1775-169.0_1652455808468_0.1838494956988832"},"_hasShrinkwrap":false},"1.0.0-canary-1779-170.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1779-170.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1779-170.0+e3ecf25","@bodiless/components":"1.0.0-canary-1779-170.0+e3ecf25","@bodiless/core":"1.0.0-canary-1779-170.0+e3ecf25","@bodiless/fclasses":"1.0.0-canary-1779-170.0+e3ecf25","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e3ecf254d8b42d555db7a3059009e094621a8820","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1779-170.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4cmlxujEGSkYGHlGzOh2+SiLkMU8BS13HJi3twak3ZeX/0cXraqOMnAotrMEOAzGO+Impk4sOwfdIzxaFDhxlw==","shasum":"6f3c7809b79b78efd277162b0edf6be3d97d1b1c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1779-170.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1Nxl3+BhFFRWlyux20pxz8zLjmdovyRnD3WPZPtnsNwIgIUqv0RxvKWhDftpplFqXMIlJxIrl4WTwV190IkCoVzM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifoFDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqt/g//bHeDyM73vw0IYsDBGXpnSb7fSRVi3hM7GSk5hAVOQf+abxmH\r\nT15WV5jaav033fxLBo4BroDSJz8cb8W/aMYvGfO1m/J87HUFM21nIvdYU4gl\r\nP+Xn0FF0RdBjyIrkfsV5xRqUoE8SqKPDfAWZr/lvThynNMqwcrIkmMkp6Qfz\r\nlr1RSJ490e+3n1aboWX7lV1DAJjdiqDgJmX28LuL+yqymy6WFKTmwOAmqZ7a\r\nRbLZqlj8nxxAVO5+LpAI9ulME56uTGMBK+gf4KqjXoCuEp/9eopn0Tfp+rwR\r\n2zVCPAEB9+IdIxaeDeBo6kAPI/PQNhUTxyaBOEoocbHg/4MQ+fRmo3WcWETm\r\n+UnsK2Lq32BoLj6Vq9jeLKO1Ot3QRpQ8EIZlfZqM2Pha9kfodCYPDqaecnV4\r\nb7KX5NValq9iTTb7iTiTFkTZEW9cRuehrJHe/QIRFRANREjohWYU7xhKMhu+\r\ni2/c42leBWneQTGwLVquxpUH7DywjCG9pxNJYPBdqxu0yWDCnAfLJRdLSoRI\r\nXcFzbLsZ7Nl8PMFxqrwT04QuCSnaELxbwgfACidZY2p8uf7mdcx/+VQjFgch\r\nD3AxK58F3lieDKWBqqXkYmimGdH+tJTQt7zko3U6BKEGXkHHmiTMeZYaVogT\r\nPG9CwYViWB/6EUxQtnROXPeLPFGLMotIolI=\r\n=ydXV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1779-170.0_1652457795766_0.3612371834486954"},"_hasShrinkwrap":false},"1.0.0-canary-1780-171.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1780-171.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1780-171.0+e3ecf25","@bodiless/components":"1.0.0-canary-1780-171.0+e3ecf25","@bodiless/core":"1.0.0-canary-1780-171.0+e3ecf25","@bodiless/fclasses":"1.0.0-canary-1780-171.0+e3ecf25","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e3ecf254d8b42d555db7a3059009e094621a8820","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1780-171.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-2N0/s9RyBshQNJEMtO+j824ef0JuNe5tGIZ8rgjjIaVxgUQcZ3Xf5osul40UqsJ/dEnlKjE/FctLURwhkB8RDw==","shasum":"c1358be20a9795f7994d295dbb8ebb24e3825cf9","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1780-171.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2zmEkksifPNVQdOv65ns1wjHuVrJMN5DGbgzUEN4ILwIhAPc34LBvYqHiVcjSQgXJhIgpAt+inTVE6Vn3iXoImkWb"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifoFMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq47g//aoU9sin1HAvWBxofX6MpnX1ndIB080biZfoN8iEpetaEgkzv\r\n3PuhE5PdgyMLJpC+RoQtyENbDCUO7q8FJl+CWdNrUQbN2Cqkf5SKIS9boVeT\r\niFkt0Z0+gRyQBt3oQ4QG9fF7v5Mf/N5VefVe0Odnd8peQ+BKfruz3VLmXlTQ\r\nlvLggxl570PSivZZ/b1A0OJn/lasyjm4uMAokqoceAFgQOywavk9iOS9gJuZ\r\ng8pIttcLII0b8isYt6gekfM+q45clo900Z32poEltrgg20t8u47I6cLWWZLS\r\neB/5OcR4UiNr7gpjYGtimmXiYOcPWfvmshtkwZB/WvtKo4j75xeVNvAWh5io\r\nOBuukuQdTVm+ZJ+U57LR/5pyR0ta/aXWQu4Hhhx93EjyoimMlTMdc+qarbTT\r\nJEQ/oucNaLNUzS/q+IsA3LgfUUWK77vghRCOTUSLE1/eABH5YXY22w4PYZzY\r\n9Vspn93YKWaq+KfWVpksQlshGUuhJCsXfJKFJQHAKeksWCx/xzZIX+T0JRfZ\r\nilyrao/kiJIRiL/7CbL8ec8ierJA38m+mghRHnWIpTzaXTeO5UQ7wnKCjYx2\r\n00hI3/8JAalCdKu2LOmbIw4hf8YDU1/OMk866NPqCiPGBg/wZODBV+eRqzsJ\r\neKPOWQj+j4iWgu5Y8282s1YjkZwqsUO9eZg=\r\n=9WEJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1780-171.0_1652457804028_0.6777149859163145"},"_hasShrinkwrap":false},"1.0.0-canary-1730-172.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1730-172.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1730-172.0+e3ecf25","@bodiless/components":"1.0.0-canary-1730-172.0+e3ecf25","@bodiless/core":"1.0.0-canary-1730-172.0+e3ecf25","@bodiless/fclasses":"1.0.0-canary-1730-172.0+e3ecf25","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e3ecf254d8b42d555db7a3059009e094621a8820","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1730-172.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-OKRpAuMJi0wX7C8jkJ/+WGPVI++4Q3LOzv7gqqY3Gd95Nh0JH69QndEM6K2TQC66BXDo4zeiRf0C2G6LYIORHQ==","shasum":"3d8416aa0ec8acc555d77dcb43114869afe4248e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1730-172.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+16g/Ffo0G0sldddABoBw1IXmVtvDrpgQ78FD/FBD5wIgKDbr3m/cWhSv/Chhp67WOA9deRjDDH82HVtAkoO3ytM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifoiJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEiw//Z3a6+LYeAXkc/AwEGKluh3+SfxTZpnd5lnw4L4SA6FQd8fBz\r\nhp+BDLv4QFg1TSnkASV22MeeZGo+t+TfDyQId7w1bqjS18akBW83gUVGtJhG\r\njAZ8/2IodrqIXgQ8rs4ZSlDeXJkUNw7iW3v0t792OrkII+MSH/KQyKE5zkBW\r\nWkLkZZ0sgy6znesQaKXX3mU8xSk0ZIfD/78gciFZmtZ6SScLpqyNp1ege2JY\r\nkMkbx+pKf6djRdbnt2XzLe5M4s6gSxgYCY14g12LLRTdrWjt4KMVF5CKtB9C\r\nZKxzvvMfwFqI95JgRjecaO1tszY7hnrDwp2BNLq1ZVqN2nD7iIUE3mXSk6iJ\r\nWporLc9zIENqtrMDBdX0ykBdHnVCIgr1+sMfqVA6XUrnfsomAij9TyzPDac7\r\nO6QLI2SV34H0bqAcf1vk4Bwuf6yFWCp4IxF8GLnJqmRTjQic66w2mLyzvV/U\r\nzSEYhgLNK68M9Zeskd9QrpRDQZQxixcV6IOuN9Bm05uEEvVNbqjdj73fa7y+\r\nTCNzPHCgzYn6ig6YFg1RlT1dI0EmKMzk3I3ZczMRbU+BDhkYdJhMUM2qXDQ7\r\nD3HVoMEGcUaTdjRW08EoZqgS4IyQS/jHwVUo+ICcj2Kl/zffSHqZBEwjzINm\r\nR8Foy8nzCbv048sjTRNI4Po++30yKimk/Sg=\r\n=DJl3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1730-172.0_1652459657035_0.9110161199477964"},"_hasShrinkwrap":false},"1.0.0-canary-1628-174.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-174.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-174.0+1c9a79c","@bodiless/components":"1.0.0-canary-1628-174.0+1c9a79c","@bodiless/core":"1.0.0-canary-1628-174.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1628-174.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-174.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-auATaFhmTK/cZs08+9LyTXAGawE4K8W1U+IL5Yejw9KWPL5EJuufRztzN0Fy24dEsTyPC9I4tv/vwuoWj01qHQ==","shasum":"c0c287130fba72ce67647c1b6682f876e941470d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-174.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCckO2B/PYwHJb62d16z7JK8aTAhihlaCW4SZ4j9rktQAIhAKs527jLq77Zv7hU4clQxuy9AtR8KM16NNlYRLMyD/ue"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifsqHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrb4g//d2wm6pf3luWAiq+mecbNL135Xe3s4wcYlIlOn5GHAzc7QAap\r\n/YLFu704zDuWsYEClrvnF7ImBNwa2IzUMjG4EYmHCZQhRqQ3cBdr6M9FrQQ3\r\nWF0ZAzlbUKw/iE078cou0v15vM4cqUeUAapRQMw9PozreLfRUoKnp6Otm+PZ\r\nfGgRdYcXbV75QAPyKXjn73WaqNbMnjyBvqqzr4UZaJ5JkTKRSdLorWt9YPmF\r\n+F7emauzOaNrLcnbPUZp8ZEkdbU+JQ3OlhQOHUhGh17jbhRCJc8i6+XVXfYM\r\nDG5OTzw6jA3w0AtHJ9ji9w7/Rla5QY/7ymTqpBVbdReSk5tloa2j/KTa0PXy\r\n59bxMEYyatoNQTZn4+ryxBYSNkrfyzN+KUiU1ZxSSDsp+4qMGTZ2f5RgcnUd\r\npdGEReAY/X97St9zOyWs73GdgL1oFq5TzkDmD9a6AMlNkRgo9yDeYwptilVO\r\n3JAxhWTA2me/6GPTnHnL/ifXMxwQmgfVSQNn4UClM/XveH4WV4zUmixAhVyt\r\nCWI0Ir5RT2ry9Os0NDibNB2fQnyL5hfWHJDhtvGpMTmR+Ynrdx6sHuDjDHU4\r\nWLRlP3y+opjIcCReqkxBGhlMCY3oXCiBz/WVYxcD6ZeA68CcZ4FkYREHmYkK\r\ngd2waDAfCWCIm6Wtq5c24ove+Klem89trQo=\r\n=LeDh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-174.0_1652476550957_0.46812207592764743"},"_hasShrinkwrap":false},"1.0.0-canary-1628-175.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-175.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-175.0+1c9a79c","@bodiless/components":"1.0.0-canary-1628-175.0+1c9a79c","@bodiless/core":"1.0.0-canary-1628-175.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1628-175.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-175.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-siUq175Y1zrjYtqJupNdQKEOkXAFSCybhjiYA6rp5v39AWQzsICTljVbvGjtJz0OPl4yIdJRI/+H5FV+EfW4rQ==","shasum":"30511657bbc6dfb24d93a590aa669ea5a493e3eb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-175.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQxqqzbiW3MtXIXYBwk7kvN0imcdIxBBDQuOw1nBlzUwIhAPJrAFD0pMHwsjldFpMoifAOKTw1kSvFVo/NM/Y+8yXx"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifs6jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr78g//SVYoqHa1w3IdRkPzXixNCttAD8yHgkpQj6MyRRDhiGtjWgeG\r\nraAu1LG+dPkTinKGkxAriRscQZ5bVXiIK/KnvK97cNyEoTHWRphtBg9pTNhT\r\nAUMyyPALbgaxvDF7SIuXgzx/pDCXL/jixfJF+CGs1sRkV+JBxeh9y/bTvtsN\r\nO1L36Hm4H6o0hoZMXz/A2gIrqhKmBJej1xuyC/EdejJnR9hzsnYhRh5lD9Pu\r\nHkl0Z+LXOSk7CvgaDKYtXn1v0v8J/zXTBNq1i/WejUGM+izvK7u12NILK6d0\r\nSmf/GdHAkHecaYiD3rG/NxBJxKslLhR9Vjkxg6PTQwEagP41LGE6XPMchyU0\r\n/tf1f4IBDLOzj5DAyivzBJHR7qsylGRl5WEOxozemUamqTFOoj1MEJksBs6g\r\nckc6c4sQm7M5OBkiaY9YhIrXaFX6th8i4r2vu1Ojazr9XPaC7EEt/ibK1Muu\r\n3u/eClyXy4vxIGm7cFBwXyoA6MrriRdIhXEg33w3OkR5t37esRTGbY8C9Igq\r\njEp5XSFXsfjWYaFUuMIdyqpZ4+7RoENs08VfCdYP0fYIdc+f0v9Dl9c0eqgH\r\n3tHIJQbE8esB61YsEf87ytNNtsP5yyLECZrOuSQxd/eTrP6YdO0FxMldUR8X\r\nAlqwrvl5QGZKzYyVSyVh01OUV9kggj7ZX4E=\r\n=rBlo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-175.0_1652477602847_0.6373173520573061"},"_hasShrinkwrap":false},"1.0.0-canary-1781-176.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1781-176.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1781-176.0+1c9a79c","@bodiless/components":"1.0.0-canary-1781-176.0+1c9a79c","@bodiless/core":"1.0.0-canary-1781-176.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1781-176.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1781-176.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-eaC7bm6Yb/AKwcun6oVL6+T1DSILKKfwYlqcdy2hYlQGMg+qEJ/fITG4vic4bDNWM9Y+BTVLb3ZoJLRMJMsZrQ==","shasum":"4dd0b02db295fb5dae3be8c1209b83e38cdf35bd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1781-176.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6rEOz+gnR3kLvzS7o9FJWLG0EExjTLkhAv0PslbfpcAiEAm3+X1frY8WFcYvLMsjromcGz7L4QbZ7gniXAIXqKD74="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigcniACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpssA/8DYjCcV40PMJAumhZk1/mbmJDfZFCp4dj+arbdsO+25X/aRFA\r\n4l3g6JaxNN6L6BNLz98tzqn7eIK5Baw/8n0akAxPV8wzBJzLFZVg+7ap+St4\r\nvd/LViFquFg+dmZ5fX3OE2jmW/mjNVmy0N+PGmClNIsuOGYMH5h2g5GHGtz3\r\nDXKKrWMoS9yK0uFt8CKJktPhn7ZGULaM/jBblHf3NCVrOMJdXn130wAqBDO4\r\niG4jYAAC8Nxm9C5EmiNIa/gxmRGn429HmW0ePg0o2Q9qicrd1eARxUOvafnB\r\nnOwhYBd5zd5HUV2IoH7G/0vMCuy3Wg6ZR1rZ5iUDPt1h6lOAjD+h0+2Q5nRF\r\n+WNQMj++I5Y8EAIKD/QzyKHXouknhQrzqWVLMNNphItjSfoHeMKty+GOjwJe\r\nK2FpIdrXcLQnC0U1pyfo/Ij+ORPN6huWrOf26bpmYNBRwen0Q5Xemj9EOAT4\r\niuC1UNeiKgJcpDidU7TQwZ3i2meIRlsDfk1G72vVloM2JSVvMZbKEqXGmDAX\r\nshokS4rOUBEt2KCCZJW3Z+kPOmYLu6Xt2XZyjGCeMUg7ulJtpkdVcLctRp2G\r\nLIMPvXD8sEcNgI2kBPPaidBCKEQg5Zt6ac8ntbmGCVgL3DWi3EJVIWAKYjsw\r\nowX53D1ij+Y3jX6/haktTIiduVow60QP7uA=\r\n=nfjT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1781-176.0_1652672994161_0.03561589059687531"},"_hasShrinkwrap":false},"1.0.0-canary-1783-177.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1783-177.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1783-177.0+1c9a79c","@bodiless/components":"1.0.0-canary-1783-177.0+1c9a79c","@bodiless/core":"1.0.0-canary-1783-177.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1783-177.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1783-177.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-AlET8OlUeHB1VoY7QTmW0OD2aMDxqQep338hXfq5HmpRfTPla2IfZjzWWZdYzOJtn77AeF/FH3OxdjMBzOuHSw==","shasum":"31aee823864938af0d52a23b0e1c484904e0dc5f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1783-177.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1GUPmXtOe4UWcavPv40LrZlqFlB68zQmi0Wbq7N+B0AiEA0PsCGp4zfzah1bBz4z8jMNyq7B9PsRQ+9Zk1nwU0SAE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiggM2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqoQ//UFrXvWX2aIcwzwSt24R2w336GXV1Z9ju8ZbCQBCr5c8lt7Aj\r\niGFmjyOOSpU75ixo3TSsBA0w31ntMetbw4xgeNO1zZvBtLr0MFATbNQvtg7l\r\nIrqDYC3oVVF9Qklj21a/LOBj7qgSOZhC6plBxCcplzDMaqseUtRGz4UjkxXO\r\nsj2QYgQPGFpaRbJqXRwpGncH/FpZzbDpQSoExHjx7WknRCneTPyGOWb69HXW\r\nU+4F2NXIAcxoKnKUleWeQ8I7u5eoFATjyXPmGKDR6AAwr6zPq4nLnaq252GF\r\n4CdePqOgz4lasAymdc3Uny7qIqW27ZfiaToENP7BV2pMphJonOBdepgoOz/n\r\nL87daMdW07KZsLPV5IVJJqCx/coV5fvb2lSc9Jjry/iyLxz0jGAI4Fd02dtn\r\nzTor70wM3JFz0ujV0GJxRCAw4q4/x6+i1ExY0jijMSR+ywGFGDLbPAfLWiUE\r\nlXpPnF3QpJvRyEOaIONti6Cw6ESAzoRCTzef4cIMa3sD6Q20A8Qy594tJLwC\r\niWRdJMeW6hFXtI+g4kGFMS7xCE/lz8LR7gWGCHvVooj0+VeBYCdYdJbdQTPj\r\nzivYErE+mO4nMbEduzW8sB2sZ4XhkHLMkt34nlNdbIYLWsO2/6R1t7sjHirl\r\nyr/GHIYyNCDQJjbc1kSjxKsKkyIV2lPK2WQ=\r\n=KNiC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1783-177.0_1652687670300_0.39116956867996255"},"_hasShrinkwrap":false},"1.0.0-canary-1784-178.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1784-178.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1784-178.0+1c9a79c","@bodiless/components":"1.0.0-canary-1784-178.0+1c9a79c","@bodiless/core":"1.0.0-canary-1784-178.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1784-178.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1784-178.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-jgSSYcurw3jYzuJuLwGsOlCn1YaurnbaYr1RiG9vD2rxhkJhCUGJxhWiEzhVdKPR8SD6ch0pS0SrOKNvA0BubQ==","shasum":"0493e0e4766e85aa32a8dd8e56a25091c4e34de2","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1784-178.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGkjcaAMUXADOT/NwneM9U/o1se97ImjanqnTY+i+6bUAiAzh3gpZTa4OCO4QhYLgaQWhC49XwI8oILQNv6Jp9VMbQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJighBAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQsRAAhbKZEDUw60FbUJ/aOO3p6B8UCxvRHP45xgYyQFvMo3VzVTiS\r\nJlTxJfWWFb4hw8ZgdDt455FiV983yPSf5Tw2TsJf3Bnju+KVyFm80P/YkeDZ\r\nuqZrwGI7AuU8BYW/pubjXRa+n+8KQge4ZXOzjSk87eSMvLLu2pFv+pdhcD13\r\nBYGfxgOAetuMrUv0MF6eOV2T2e35XINVRJ2OLZyl6qf2V/+S7uaZB/6EYeyX\r\nb3D7A589pnLrACBhiLnMTkzYwlq/7tumAJ/RbEsrrwraH5eaAOKoHxRsyO25\r\n5CvBRhMRM2oqbVjGsTb7c9XdfolNSaIJBmJmp1/qvK10BdzGlWzggSOGC/1i\r\n/FAQiZqGHM4yJMaN2+xlrqdEJ5YNsAaX4n4usQnkZYgD7/zRoiNquh20bDPT\r\ntRZ9jRkaiwbywbLyWRvZONSVo9rpsO5Du5rBBQ5ckq107QUoa+dKgm+d/fN1\r\nI7LPsIORIr9OEFm4Zsq99CELSHQlR9ZjEiSksvMSHl6JAR9fhEkGwXWLGTuV\r\n+7e9K6guQbon12yk2TDiNF6CDpJZK4En7fmiTmQAFLIM7oL92UZ6Slff1ZjN\r\njjNC6cxPHeaii8bN6GG5HHd5TkG6EtDt4gzkHYooQn4uCBTjHavgjTmuCU1m\r\nHzQ2vvDl4sUGg/N44gbNaVY/8EGbWmrYnuQ=\r\n=tSqg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1784-178.0_1652691008148_0.7458426310317652"},"_hasShrinkwrap":false},"1.0.0-canary-1784-179.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1784-179.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1784-179.0+1c9a79c","@bodiless/components":"1.0.0-canary-1784-179.0+1c9a79c","@bodiless/core":"1.0.0-canary-1784-179.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1784-179.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1784-179.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-7LuMMEItVJfplG1oVVMhQE3fS66mniXaWzaejsScp1l2FkMH9S8+1byluIsN95PYR4QBPSohQMMi2DN9fOAlag==","shasum":"bad62f39c73264d750f6433875083bdba3e8d279","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1784-179.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBA6/65qtRQT3Grof89sGbvVcLB3MmNJsWh0J0l43bOYAiA7V6z0ut9xVdHlgDyXtQpMbeIUE1RrT5kZUR9dQlFllg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigiLAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVFw/9E7PmGwdoF07OXryvyk/LknZ8R3CME6DAAM1t3xcmrQnEfG60\r\nQOqYmdmk25p0luwYZ/bKq583qhzwJyLsff5ix68aA2lEQHDX5MTqpZiLyvS+\r\n2Iq9T5m6ZELpyuJISNOVi9oXnJmg3CvVK8j9ss/gPVZCwu/R68eeFyszA0Ux\r\ncmy6SIZoo3jVW9LzHkf50WWtJGMNfVNg8V458cFwbZOo7iDElRu5BCgiw+le\r\nxUZ1OtFTQDO8Ho6rvNb0W3s8u/avmaxJxGVatN48FGXGxTUkKzx3KuIgkduP\r\nXwv8+IoHFlU7M5NXajbEboqfePKoAAV7uNOcK4k6EB1VvSFAj5yjHSK5q+/B\r\nBLgy03K9EgQDEz0W4QQXXmvGEBQenzT6G9yBIZDaoXOmcPxJ42aJkQgTDvPC\r\nV05yAK5K2nL6n8DZ6FwIo88JIKk6eGiW//AtWUISui6IulI2fWyHawC5LI1u\r\nXRmlU5EAE8KCyuVVzJC94fqKBcMXMJbWeHyOBhMoWV81GP0aajP1/MmHXzdC\r\nD8+54R/8iMyQG8k8MxCgyGCbe9MSdifD29PBIjl4mlAUp1Ht/hopt6iejNws\r\nIxi6CLmSG/tSNB3Y3gmL2FYq7mpQ9OqKYbeFec20CG4VisWk+1N5A7uv1Foy\r\nyOAdeOnS9t8TXwOYCaXDCVywWLx7DXRqDns=\r\n=F08I\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1784-179.0_1652695743923_0.034314671978711075"},"_hasShrinkwrap":false},"1.0.0-canary-1785-180.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-180.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-180.0+1c9a79c","@bodiless/components":"1.0.0-canary-1785-180.0+1c9a79c","@bodiless/core":"1.0.0-canary-1785-180.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1785-180.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-180.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-e7MYbKm/NFwEcuV9fqyiaJ0XoNlPxC35+/cbUkMqHKGae0i4DPTih58nHtWz9PYeqmvALWBh3s8+paMq6TTV1g==","shasum":"5ced5e86a95dff2f6ecda30be235ce5dd6c49c7a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-180.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAG2hYekutF1hn2DNwWtj/H0PKV66eX2RHTAxt+nIL+7AiBUJarntjkCMSOr8eIkS6cQuGwHRzVR50/5nhMORpr5YA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigjigACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq32A/9ExoQMKfImstxcEBR0F5kfiEM+LXaJqrei5/gJbI//rqP1/lF\r\nLnTb83Em/JkFiZhCy/Uo5kMnQnAisnO1do2IDI307ZziV/5Uo+HXubX4NVLS\r\ncjkOlZ40ZYrbjY1Azd70oAFyF4/PdBpCXXE9jA5ko2xCEj4kMMaXP0FriDtx\r\nnQxXLP2Ke8sQsaPH2O7+C92GHF4ytG7qIbChVqZ5VMauOiWyrlqcCQ/aQ4mQ\r\nH3VfX/VJ1VXaqz3bLn6YXbrgizImzsAYshgSXR1IZGeD9T7AbCS93CSsO3Sg\r\nuKJ7SaY93hR+1aWToWFcq+lSNvwFSa2L4ekndfccHdAeW7eQExj7Y+swy498\r\nlGr1DPjThjKhF74BykUv5DLNf32X67sFY9exqOqtO3Fgh3cxl4T6a23SKicE\r\nUpq0ElUww3YVaPfMyrPBQBhlnM+XSRbv3wGU0pNrMBHqN2C09eMHCGbpNiRu\r\nykhkTS4cYEtMCkCGYV36VP5KS76jxeXN3gUN/jR/SUft6qHhQ17JgG6Xxx6d\r\n7Xq6vV10CINvzjuNyrT86siGYqRwj8NtPTGKpNhVQyEqEgGUW/tpq1AAa7aR\r\nBhm1MJwW6cxJD3dlOKE/3PrEvtJcLu9eFZHYb950thdHMDABxc+X+84hsVwi\r\njemgdLWEg4tBBhbSgfewgIEiRfngadfrBqE=\r\n=pfMV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-180.0_1652701344448_0.09257267101456201"},"_hasShrinkwrap":false},"1.0.0-canary-1783-181.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1783-181.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1783-181.0+1c9a79c","@bodiless/components":"1.0.0-canary-1783-181.0+1c9a79c","@bodiless/core":"1.0.0-canary-1783-181.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1783-181.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1783-181.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-YLaqcCShrJ7b2gjHMESMWaqzY7VD7JmuJDUGrRsG1Odv9ZdIjYYUpWukEmX6OVZEDzHCZTXOuRsvBYa62jeguw==","shasum":"c08b8e1730f4e010b51bffce72f6114fc494190c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1783-181.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8sqWX4OVO3IzQ8MmpB8lmZwpvXBc+NsOTOH2WR5ArJAIgJd4Bls+LpNNeGRL40RxbFgElyfAxjsZ7ecBxiggAd4k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigjx6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4TQ/5AQpECoQ7CaRS5kkippHxYpxpGFh5ICYW6nOrvwESwR/0cR18\r\nvNbGBzljefZWjhjkEeNvfVwJQCA9RBS8eU6TGXO3Hu5id9C9fSxtKUjrL6D0\r\n/jTqEiLaSFMDKVjmqrXL4jcQsvr3h4HB8aYmRsEL2lbi5VxwqJeZeceiV82i\r\n0/itjZ2ueBnA8GP5vHb+NG5c3MkhYJUSTp8CW914Ru4VwMBX1DiIVJnMW2iQ\r\n0MZEHGu5RIpNVJbYr9xl+RvsI42RFLDkITYovWgk510HkS0F0QdwzAZwTCoj\r\n2L2bHqXzqJQa7LKXW4HtDIjF7lwzrrm9ZYlOqr33aPUi0VtZ05Fxq46e7jCS\r\nJ7nzYgBEX2XS1vHtJtb4xyw9f3pbwhqXiyI3mvTSVb4eZ5xeuxjOMzxnVQE9\r\njlpn8zAuqSmFWtdEmMT5jMhnvWipRpW3Dg+J7GL64JjM+Qg87ZyJQqCWLSk/\r\nVfVn7YALglCfMPVDWtuFkqn2mh0mfLGIu3Rfmab4FJASRmAu73EK/x8BoZ7o\r\nIl1Iq5NhYE/Db3lU492vmj+y95hmjlcyIAtxk6JA09v5dx7etp6TV1xqmJU5\r\ncE7EVLnxjOJ4DiscMGb0AEuAfhW6UoxVRQBJfEUTmY+nTwktu5XHu8U5Wl4C\r\nF5wHHdPHKfsH8QpzR6iKulwINoJ+RSEErOw=\r\n=kEgd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1783-181.0_1652702330256_0.049560278806279445"},"_hasShrinkwrap":false},"1.0.0-canary-1785-182.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-182.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-182.0+1c9a79c","@bodiless/components":"1.0.0-canary-1785-182.0+1c9a79c","@bodiless/core":"1.0.0-canary-1785-182.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1785-182.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-182.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-0BU5aAEaFF/yJaI+UDQxygVRJ7J9aLepV4TpEsE59yTmrJ4u9v1NOo/OXrBGuq5FCcAoq63Dh+cDOrUtxPVqoA==","shasum":"46798d4bcfb5e38d55a57b0e9089a7be8ef31bdd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-182.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDzC7UaOg4MeA0llUeg0x2WG5D7h7iy968Q7UXn1hUswIhALNwIeZNh0aCtyC/bGK6zC9dfP+bA8nScKIg8PxIu+OY"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigkanACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjtQ/9EUKg7MJeAfv8o45TDDrDqUc86SqA3B2Jgf0n+CQw9eDq/Ll4\r\ngbPa7uYr5sRqfAag8hcYDfx0i2CqE1EcOI5Ee/zbQ6Fj3ELKb5su+CJaWiiw\r\nyTasBBI4cWCOYGuzLzhnAMxKbqVlQkUyEl1ZMtR9hRXmB4NoTWwuBSAaSesB\r\nqYX55nFAtwtCEJWdoXszwHjfiISFZZ9YZ9k0BFd8qf3QuS4VM8GN5e66HcSv\r\noCZLK/POF9yBhozxZMub9oZTcSIdInci1koEx4vQondnhp+xSi0WnBiG8LD6\r\nD39qY6H9qO9QbL79rcmUPWYDKPu0recc2amjyM/z2sOjq7PvY7hl5G1ZpnyJ\r\nocNKxQEFA9VfFZ0eHp2DJWad7BUf9lXB5JSQTdY5u/hXv77xtjIg/bUf+/Lx\r\n+gVkvSg2NhbJjj6ghwHqRgSA7PpxUrPMX9QMf2XOl0DCVTe8nYKqnYSCdbfZ\r\noMIS32ECDhXddizt9M7ZbyYmj46WrVYWdBbCZITHeT95phQzwDWFXcM8Rn+/\r\n/0kV/vNzG5aff8aw9LzX8SQYSblwcDdnrkqXZm+DaPxtLSYqCVniTMWf3BJD\r\nUBAOtvXOv8V1qY2cMxUUmStg3vPTvoWzjjGJ1nsCFvDy8K88FIqU6UZEWdw9\r\n8MYg+yVq3l8a4pv3OBzMZRMfai7+Ij4Jzg8=\r\n=kxXf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-182.0_1652704935318_0.3630130320856759"},"_hasShrinkwrap":false},"1.0.0-canary-1785-183.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-183.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-183.0+1c9a79c","@bodiless/components":"1.0.0-canary-1785-183.0+1c9a79c","@bodiless/core":"1.0.0-canary-1785-183.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1785-183.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-183.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-zznF1LytbiK6MrUrgjssY4N+tHuMT53xr2YXVu1T4gCGNiQ6qjNFTSES4F+bXUP45yL4igCqWEgVDT4xi9Vunw==","shasum":"1d1875aeb18ce6d951d8b18b455459d20f9a8f2d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-183.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiiUie6MK/SlxVoK4tzAoYsmXG/DHKjZshT7mz82nI0gIhAPZk09v7RoKl8JCVW4ynD+EWfFi0AdzkUruvyqz3hb2L"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigkvFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/Gg//b0nNX0hccQlA3Net1bw/iNtZBvN+O51pqysdDV6dhpkak0ck\r\nzW3jbCbV2+vW3vASqY8fiL4uVYDA3WlM8xAkIOmFXtgzMr5Zxo8r7zdppjOA\r\naOhPZbXHtxlnwqba07BfbXkKNlNXC7DwQFpS5X1gAoGGRA8TCTKs4TF/tcug\r\nCKsL2ev167wa/03rOSBfMWPGFhDdaPXm28a8q8ppbcZTzCUyrwBJeKWWEIFh\r\nIzkTdGFoVEK9cFvk3QewrP3zChtWJfMr0CwKg4EQzQMqIiDAiLQm9/nGmNMJ\r\nkM/7ih9QndMTO4rple/RxCaaEgj4rUA4UItZ5sPakZmBrKsJ1z8tEBhKqrWD\r\nRofc0+BPrzMBbjFoVY8oOFj9rrLFEdpW58GROXdLwxZcf4dMaMJmtWz0kFhs\r\nmQ7yug1g/3l8jwvo7ideErB4woXKqTZUtS+0625aUzInV2UpuxXrhVNdAVKD\r\nEfVzoOPi/lheDTd0vxfzcuihm4A8YkfxjuNcPUVxHRnGXqxoQWNerq2SrwYN\r\n0pSdWiuDVEE/xYaua2MXw496HI6QOoUdrjMLkZhaVfxal54JmDlGgJjXwyfg\r\nxLlsohWyS1pQopD3wPNeqCRYesbwLsKiKAntq7oWf8w8aLxZALRHed+CXbeu\r\n/wDhGl3czaf62HHTxx4xKQgzbmbAodgsFh4=\r\n=lw4y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-183.0_1652706245743_0.03883059698881963"},"_hasShrinkwrap":false},"1.0.0-canary-1500-184.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1500-184.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1500-184.0+1c9a79c","@bodiless/components":"1.0.0-canary-1500-184.0+1c9a79c","@bodiless/core":"1.0.0-canary-1500-184.0+1c9a79c","@bodiless/fclasses":"1.0.0-canary-1500-184.0+1c9a79c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1c9a79c83dbd12c27a5c90856308114877ae2f09","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1500-184.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-fLoYVqgTYBsGbBFFT85DlEewxVD0eNGXvizWHsAMzwmX/2UXiT5zN8oXI4UEtLgcANN4CsQ2yuEZlIuf2VSp7A==","shasum":"ce33bf627a33c43ead662cacae4237c2b8ce3471","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1500-184.0.tgz","fileCount":22,"unpackedSize":229736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgD/TdkP0Y7rOibnZN2IWJdE2ZAGEStLIolVuZ/9GEnAiEA/CoRQr1AA7tSR4aZ9DIOWvxr9CJr2YGxkMa4D4s7eZI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiglKkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxzRAAjp2Z+AQnmvHf7EsO4HR+kCuYYwl64lmogbPtO3C4GzkZ9hwD\r\n12eomryCNqqyXo5TTLGW1VLy9tfeBQLfH8BRmr8r7SXwSlnAkKXyrpDTB2Wi\r\nP2ZwFa3J9uUBGh24r3yKJtl11gTszYotcdIQxyREL4YSrwEADapBfLUOmmdJ\r\nrdC90LgdPr9eT7p5wuXNECoo1TffCNXRnqmGtoDPBqJ8PctVO1DeTi2glh//\r\nS1vd0CN4f+1haDUShYKcOkJr4HuuaA0L35JN5Yp12Sykz+v11fUWltN8LKz1\r\nWMee4N+RcevKpDEBvHOoiJAzJZac2Y3z1pkkukgdvWg46RBkzyIIBEZpenq4\r\nsdnxNP9ngQZm+SYqY2jSZRImj+OnSYD/k+JwY4Ay8YO+lBjn091pHRkfMIVg\r\nqkXslucJ+/svGmf1l46hQJAS469cxnpga7re4Lq6ySx3rGm2i9dDcTXsvGbl\r\nCTWIZgHu14Nbf8EC4mflEjw1riuekbuSEBE0yLM+jKfcYR/i5vDIMbwQXBoz\r\nt8NbzINtZwg5icKaxCivt1tYC32U/GODmgaKqkq8FwIXlLHekqRDHLZkx2/m\r\nkmnG73R6f6M805yb7beoiatV+KV7kU9e/l75TkRVdjNzi6ZqkoVP3hyorRWW\r\nqeGqG9EMLDY49IJvzAONNdVEfBHLLeZ+n5c=\r\n=x9jp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1500-184.0_1652708004297_0.6062959540021424"},"_hasShrinkwrap":false},"1.0.0-canary-1778-185.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-185.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-185.0+95f2c3d","@bodiless/components":"1.0.0-canary-1778-185.0+95f2c3d","@bodiless/core":"1.0.0-canary-1778-185.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1778-185.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-185.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-hRJUr2RtffhAiqdjl1NnajeIyNL/XRHpP6kF4yXJTTzITsqAUEweljqgbDWvFrEArHxldkdxMoA2FsO7J1VeJQ==","shasum":"6f0be0de2263a62575f4a4497b7cbfcfd9048cf2","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-185.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICS8q4mu1w8YLynW1yaIhDjJ2wW9BIapU+aYxb+12r+rAiEAtRvk7EkF12m+RDCLSoAJXGMPuQ/xHT4SN1UccfQ/3q8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiglzgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9ew/+MxhWKb+OOGKdlegPEPrNzup0A32FPwTbLg2UI8aDlAvaUYHw\r\n7wmhctZBBgnCatxNsgnWtqR900Eqn+GVuyI7uBIhAYGFMovd3pZcTun7jxzA\r\n5S0asKzUrGnlzPqmf0I/pNSvibcqrf9USZZ9mbHxoPKu2Pnj1tsNpvW6ooEL\r\nUGiV7rNKVNzmtFBZwBTblk5quc0b+zQ5dIEil2Sxkr5e8aq5CVccFFh4xigK\r\n+KOI6x9GrEJvMFNLkH94AV4qEySpK5UVntw4O6/Qb9aPfSMiGmvZec9hAoPm\r\nGN9q0OuRSut6p51xb6D5LWY07ZpOPJ/JQPFEJlclGK6OKEg5fqOuaQYUYet8\r\niNwdHe+J++i+wR1zxmB0ml/qxTRdrFmxVwubQ5A13r9ngWXNL7NNYbKjvWx0\r\nQN9FJZwMM5PsFQK3TIoYXdVTKd5iGQLvJSCtXakYYv/24iMgqq2bhssX87nb\r\nOjBTNKbvrprG1kLpXAFrUjiqxxiNhoXg4C50CXmrPWaNmodaRodXdhWsqgw1\r\nsna/a2AFw3x5ftfq+Nj13HymMFkdOH8oPFWvGnbF+xez/Cq5D4ayNLi884aL\r\nE/b1xnlvqtbAW8Bf5e/ZB+ZsQ83lrnOSpAOFF6j3v+nIYD5FZLT4VTqQeYN6\r\n7ZH+wJPtHaqNOll2+AEiP1bUb/A5JNv+PQc=\r\n=EYye\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-185.0_1652710624317_0.08968328637710998"},"_hasShrinkwrap":false},"1.0.0-canary-1778-186.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-186.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-186.0+95f2c3d","@bodiless/components":"1.0.0-canary-1778-186.0+95f2c3d","@bodiless/core":"1.0.0-canary-1778-186.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1778-186.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-186.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-6q8pYH6gEA+xVbQ7VQ0APJ6GpgZ+lYVnUvaRS3Nx9ueS9T1lQC8zLG/WRIfowoFb2/8+TiBMXNqpJilaU3p6hQ==","shasum":"ec2110a8c0868106effe933ef1109e507eba5bf3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-186.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQDMFOqHzIAr9T5VD9zH0fRTBfoZ/7kTCz47lagMbTdKbwIfdtNhmFnUqmY8YueLm6+Fz/OZlYSZoICdm3vnbYbw+w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigmBuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre+w/+JakRL+QlDkH3+7tDxFFt+phRtKsvBwY59LAVZOVyavOOeXzV\r\nwNpAtICHD9GZ9pWsbVgkwlgr/0nweD6/XxCSWjqPUZCKN8HpaTPqRd/7CzhI\r\nzIJ0U08rZdq8PTsEvSneEtZq1WWr5FxfSdomTnRn4qoqkBgb7XfxelvT4Aag\r\nVkhEgbJ+rq+oHSdRCx4xAdUx8tQVEN5UpeNWWo/LBN5e/Sx2jUWhOlCOjff7\r\n44GRlqt7QcEXjprpsYbEkpHSnGth75IGuTpfFKJE63M64qnSdTiTr8Zil5f/\r\ntuiU7yh3ofa2Nz18v3tl9FHmYltIyL2h7drn/LgGeOpWRYLaxvx2W6Ufnf1N\r\nxE2kfCltIs9f9xYq9QQ7F0tJ4v9tOr+RZYJsf/8Gv3uXf7BaIplfCzD/Ra7a\r\nuK0znjzEf4LKj7cN35EXbKrREIpWvXa1oOncLZJhdEysQ4W1wiPMvSR0I7cu\r\n1HKsci5SJuvUEQEos8Nvp2Y2xhTOCsMmrfoXX7cfzB9UlmLLw8Ej0rnHfl3Q\r\nMuNGiAJe+rqfHdc64YF+0fvVnQZOP8pNHTdt8LW7jeYMNEUU1TBibaiTHG5a\r\nbVuQ38c8JEakuF9G3BG9eWfFbcm3jXNCGy0ASh7dBSUYYbCKUKHOkjK69GXN\r\n+3vnRHo6G76OxpNNCFW/1jyZ/fXFM2928OQ=\r\n=sVd9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-186.0_1652711533937_0.8384811419022276"},"_hasShrinkwrap":false},"1.0.0-canary-1775-187.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1775-187.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1775-187.0+95f2c3d","@bodiless/components":"1.0.0-canary-1775-187.0+95f2c3d","@bodiless/core":"1.0.0-canary-1775-187.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1775-187.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1775-187.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Nr+fs522p2VmC+KJLuvOEYBQo4hcq6Pu7YTNAfSLrM3gwLtOxwyXiR9ECIwfgfemm0IRaopHnOS5sVkb+sVfrQ==","shasum":"7449d52d6efcbd3624cebba002ef80c115e029bb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1775-187.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERAOxqOrpuPUE8MwaXFlurIKouvCyHZ11+FgILXpF+XAiEAtiSMOApFmx3kUqymQ5sifMBtgrmMXxM7CXDNMPwOXvI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigmtvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroaQ/+Kj+4hDgcy1/OTqUJu9ITQkJ6oA5rF+FuP1txtrhuGAZIHreK\r\nULpsMCLqbZRJpkViZG63JlkNUHBxCxnkeBp+lqNWJO4yV6wuWWfiTL9vaMYs\r\nxDLzqyS3nI4FdyeTs12nWBclX9T8S+XptOOnHFx5KpFNSDR/68UXXpbJcWY6\r\nny3f9Fljnc4o6oeI4nb88XzMcvoiYvDuBSp1tF4ShVddDWlaQaCRmLrMFKmZ\r\nuzj4O651WL7vuWpk40Dy+Rn2Z6ilddJ/WNkFyTInzeZ/C1a4LTLEVZocBMmL\r\n4ARt2UclTIczuDp04lWUVEuT14DcmBtVbin0iHBy4dJ/pCkjoGFFT1+Qh232\r\nhP6c5IdoWiKlEXoMcs+/58lV7nIWIiRo+ly81bx2BrD3fcnwtDXOnVMwLnsb\r\n+4ceidI8NgcN+aq3sVAv/3iTpBYczGpdXoY6wcfamxoYkP6xwGi7dU9RxkIz\r\nHVCDbA9QAqcvAhsiB2k7VmI31ptH7vIVYeq/EZutq1aNR/l/shal7QQtJNB3\r\nd2tbWfhtFB5U1E5awXZevmvmOf9llqeg1EpTOCL8CcGeb5aUagDwdARBPdbq\r\ne+WpyCW2ld5FawCNbS1/mZNVXj/A6M+fvMLznXIoToO5gDfKz4wKcEUov+YJ\r\nOvzRpGxLu/lkqX656+QxhzlaijoJNMUrBTw=\r\n=+LS8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1775-187.0_1652714351359_0.1816274994467595"},"_hasShrinkwrap":false},"1.0.0-canary-1781-188.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1781-188.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1781-188.0+95f2c3d","@bodiless/components":"1.0.0-canary-1781-188.0+95f2c3d","@bodiless/core":"1.0.0-canary-1781-188.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1781-188.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1781-188.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-N2zGN9UWDEJm59+AVPCzS1Ux/qqGkOGqVmpQcbpdy3tnfXKVAMQ+uMbW++4X2kqzE10QxMf38M6mLAM/F7Tcsw==","shasum":"5db5141ba269e8a0c8946b96c26a473f7711c199","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1781-188.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCW0unvuE50CkpEvnwpitB5zGbinc64VqRq90s1wvVJAIgCcoDCq06GpfuXcOGOoLOPYsP3u+u1+4yZQrMN0VduW0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJign0JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFZw//drje7g/lmHui9m24A3jS+rfEbRUyWbfgCwi4HUDs4quwhsB8\r\niaJOFHKEXn2mb4ovt+z4IaWg3H27ROxAN+DmoDwnx2sQHzwJMUSFiE2Q7FnA\r\nsBFMqg2ff8oH5RnWgLHqKUIx86/sRSMJWEt/bqGcbEeQRLffCE1+W2wMRn27\r\nCp5cfgiJEJqqkkcrza1sUpOiDHYwdT6Bp3u/Tcx0TSRdIS/xf3iEd3lK77Hh\r\nhxgEgIB/iXd5erz1LLGg0VHe3kz5kikUqcF0vpO3Xq/ZhB1icWwC7wrREGF5\r\n9HUdpts8t55axAleiICH+lZ/KSeqnSZdQmBFquRO/YG2AyLeNqp0mxe3Lnl2\r\n95QOVGffEj903MzQpzbj3Qs7KAQuX2pD9CsZadMIasIMCYTajg46h5zfKHwr\r\njytuVeo9r2koTK7gSKG60dblGkzBmprmLe6mRWjIo8BbYNw8jW/alaDcEmsz\r\n+uQOGppZA/FzF3SrzoSCv42IR8WOqEVEfhzIESG01ddqfBuYHz1wcZLY02XG\r\n9x2gxHfZxRYqse/xQ9qAywPoxQexoyVRmY3NYNt+0zhMTRIWZku8wjtA56E3\r\nOR0YYOGD4XJx643gakLGUu/e29WZw0f3jtKau/49p0dwQ1KZCLZNVtbnqI4Y\r\n8UGfuSSG59Ldc2PWCqaRZwuAaW35BbFjzW4=\r\n=kbLj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1781-188.0_1652718857744_0.8857853753536511"},"_hasShrinkwrap":false},"1.0.0-canary-1786-189.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1786-189.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1786-189.0+95f2c3d","@bodiless/components":"1.0.0-canary-1786-189.0+95f2c3d","@bodiless/core":"1.0.0-canary-1786-189.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1786-189.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1786-189.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-1P5UOFNDA+PpReojDxXz9QGmdWcTOIOHK0+O+O2JO46GMoOIXKmDFcWyXKSghylQiGE7536Rihxg33X7CSACeQ==","shasum":"ed0fd39c2607247961ebac3ba374888d616369f0","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1786-189.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe+CQpvAblxU17kvhUrbBo/wjzMQuGOZScu4NDX3atzgIhAJGKH4MeUA0GVTEo0UvbDqMgLeUbrwaAmloqFzbnnwbe"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigqq/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocvQ//RxAuPzJzRQDLwr2TmhjOhFxOi3LF8u8JAKAYV+jrlYxTHqIx\r\neleCUR5DF4alVcm1oc1fn8cwHR9peyHZF28brsfBea1JiU1IOJOv+KsQU77R\r\nbJ/1RFYlmir1N/MqxLeBOZOq6HjRr9+SMOlHdfmVN3bMehm07wMSUcMYwSWC\r\nvyq7m53qu9/A6XJq8ynhmMXxsPoBIsUA9tKgMJb7q4hBV39YCqk+T4cYZy7B\r\nrwBs1sE11WAkDaJrCY0y8IZcRZcOzovF+je55NbGgtDUWvQsl2tk8zLopr8I\r\nPC58moQlXGY5t5tDuvTK5otz0WmIDLJcdm8UP40GoSQyH1pInTIh/26RKF/h\r\nw5zpcHcBgfkLsPFALGoQqQPFDUqCJTtXMSq2eTs8pyh4oWuXf5qULbLsOFAn\r\n0w7qnIMXE0fP4CEo/mcbmOkYZVFrUZ557s/Zhs0GIJ4lYBN2iZaqnhSSYSdJ\r\ntK17XilT0aJlDTsH5Fvww1ksYzbMguDglyqvKzefL6JQzPd7zrDP48wxn9uc\r\nRdodCHYJely+0IH3pxW+eAnwNUirqw0gpHkfIlZYhLCVdH15bqrnGjWHp6a6\r\ni3N9RNh2EOX/ZH+egeeF4v8h0tcqx8TJjTVkMKB1Y+t9tHKUOX7gJ0UrkQ3d\r\n7+e5yUF6VtehtVGd7jKBlqdyXxAXEZwK6B0=\r\n=/soq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1786-189.0_1652730559465_0.17975323461259252"},"_hasShrinkwrap":false},"1.0.0-canary-1787-190.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-190.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-190.0+95f2c3d","@bodiless/components":"1.0.0-canary-1787-190.0+95f2c3d","@bodiless/core":"1.0.0-canary-1787-190.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1787-190.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-190.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-wEHep8vRrWF7+Iz58na7V4bRMmVS5J6noY/a82SmY2jasYgzAgoLDMRov1Yp8q8xlrdRfaDkSSxghLBrR0wg2Q==","shasum":"ab7330eb6f8e959de8907e774f4811c0d005d04c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-190.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1Qb/OnK3EdWG8WArkG/Vwcw2fnfbD4vPdLgLfBkkMqAiEA4M8dxX6q5Za6sstT+SRS0w/L/8OGOyS1f9Tu7I2MkWs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigr+XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpH+g//RgAaYcLPpk7qj/u1eQfyEOd1j4wHjVzMCGj2dxMa6NWYcPRE\r\nYYwHbAVwgEFP8p7gwrpdjpP8ERYoVrfapva5iQ/BWp0NDKnlrEdJvYW45Y5B\r\nh/PVPp9LkGnSQP6mLxV1jOgpkETZSWXrp/PI0hQsuyeWHxdvIkEpjF6PpyhI\r\ndO+fu284v2Z18o/MRgzxTeiIE1YTxCfXOhxmiivWAg/GRnFU0X9t4vS6uyRB\r\nZWYe8gtwQIfQEY7EWb6hZpn2XY5Nx/xnmUOewW0IFrdvlhj/1EBoIcU8YNrq\r\nAht9xTh35rzVNnEhAq3cHBCV790kirKPJFXBW3katss3CCDDkSDlxjufZVsQ\r\nCWNNYp6kmIWDH6blGlCETkRFt56wd6k3lBeMwwLY3kuWxLbDq7/OhybdaX00\r\np0HoafWrUhNPrexH2hoOUFHJxBl9SUW1Pcl8dnpdj7YiAMUEdwr8z++9lxIg\r\nAGN6q1ZxFQUzCyLzinqVqYjkLCFCfJJzJX5NZCJSWTGcN00Q827/PZkgvlEb\r\nX7zSdbCkF67MIZPwp2KLdIW6obcvby6GvcVZ7YclABny9trXOHs+gosTERmD\r\niR63WwS93tUSwluJt7SOQ20P1QcDxQuujYEw5s6ByPRIKFYuE/psPJfjjQn9\r\nkxnGTs6/g7IZXwyglRvXmCYaPYG7pvARNCs=\r\n=42UI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-190.0_1652735894908_0.7085526339825434"},"_hasShrinkwrap":false},"1.0.0-canary-1787-191.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-191.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-191.0+95f2c3d","@bodiless/components":"1.0.0-canary-1787-191.0+95f2c3d","@bodiless/core":"1.0.0-canary-1787-191.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1787-191.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-191.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xTOV2fdHe+99wyQygIz6WN0PRAt6kvbhUCSpvz27m6aw0ybVEu08NHe2J03wM1uY5YFQWa2Kq18pY1veJNVlFg==","shasum":"a4c9b5102a195cda188af830c9910aa1feedcbe9","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-191.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEPWurk3VLkT5S6juE+HmxH+5S4Fjnk9UL4oks2N9Ua/AiEA5Py775aZUzF8FZsIkDCJrh+sYabFW77RpChGtC4O+IE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigsFPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopVw/+Ph2hz5bor1bF17wvtMCZR0tDrPnuJzVg2fZhHm8OkG38a9pD\r\nKeXgnSYIce3KvJttNE+TifZRFAFnjbDqE8d3nq4KoEULINN55pWaQ9G/3oNn\r\nwM/PfxMf5+r0/Uc+65a7/zv6nS/2i14uPQFl97ZNR409dc6YAG+/AxiMEViu\r\nyqxf8lw+umH3wcj90BVXLKVrEAKii5nIzUOCW6QArtHTX+EFX9g35e+A3Fo4\r\nNVuF0KXs7Et2prpImHi5FkONLfjh3eVTCoLdd5JFDOEQntoQCOiSEyVoFNC5\r\ncA7ixiVLGCciu1uBYivVUgz+VxaWs/apyQ1nSs1rUGejJSc8fceyhwvHNXvs\r\nLIexpPGTq/KbnZiehKQ9Y5ot9OqFeyQhM8VsYJEff++PlBrZehkCScb1heJr\r\no2j3zVzQYdOflnjjjvZTpoEm26kBvywg4q5hFftwKsNIkqLmahh2YBl4JoQS\r\nTMMLfTDS+7LnmwcX72DQ6LRBSrh+6f8GfcjqFz6c24r/ythUOMifQBEg75iY\r\nLVmoALnJAK68w9a+yupq27d/8tsWp8LoZSRzYgYia07ErJiSJV55wkbNLAJM\r\nrvrK+xqd0tTeH3wyS8LYstkjuNKlaNUqi3j6/QmTNle9RDaEodYxsx7xyeCZ\r\neEl8jUUpDRNUesRRO+TH/G1QN+9fH+DXekY=\r\n=qV76\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-191.0_1652736335702_0.996519387330018"},"_hasShrinkwrap":false},"1.0.0-canary-1788-192.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1788-192.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1788-192.0+95f2c3d","@bodiless/components":"1.0.0-canary-1788-192.0+95f2c3d","@bodiless/core":"1.0.0-canary-1788-192.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1788-192.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1788-192.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-kyS233Wo3fIa5CwdSe89Cqg/XJLBfcTRf13ugN1p7ey9O66l1MSryVu972X24ifx0EhgKhZxzZK0hRuRiyJLMQ==","shasum":"61c22d3b84e6c201ac9403ef0d1f12d40313f742","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1788-192.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCF4RkbEDdF1QluMsHK2g3OAVYbscpZpKLpPe2pEPjL0AIgThaldp0mPkUP/tvlL4aIeZ0wbYVUYxrLhUjVZKvIH74="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigsSuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogEA//Xbs1DumDgniDNRHyHAoil0Cw/vA1RdAyOmy1rJZi+OmEj63z\r\nDnvkhx+lEJpca5ZjOQMxY8120P0ceS75fumQ1DmSnCrqVp4w9ZAbXF6Nr89A\r\nDmDkYs0eaJXJc8U7KCLqq2pEcHaQpDt6c7cFx89/bRo3TOOgaAUIXI/Hmno8\r\nDchXR2BfjzNJNgN/98nz+feoaYFiSVUyeOEXzGmbzWqGQfLdNWXAuixTudr7\r\nda9AlQZS7eI+vKghIjbuFa67wtcU8lsQXZoyA4GWKLK23iYUOpOgBBW82RJi\r\ncDVi+cKQLDzNMXO7qcexpiHISADSC6t54ulRQFohn16fcbSTuQBDheVfVPeD\r\nny2Kcfc9UQYvzairtxby3ieAlr4wwG4ra61O6M0A/X8XdeVycNzV6+awrhtV\r\nWTGtaIfH6ugsiwzlDLg1pUTpHyuvbVPsdpA/Y/esclt9C28FZqTf3cOUAXRs\r\nL3BvQh5JCK1YTR5PoBMSWt/d61fQc0xGescdR8XdQr59poepVnw7I2bLPM2j\r\nk5WBEnJg/I6L6alZ/GjBU9XJ/3glJhDRuGFMph0/yCjwguOIzqNmVilRDgWr\r\n36x7wl6oJXkODxujnPa04owiQshWIorAECovkFUVvV8FZduW0FBX532U+Gxu\r\noM6EOGlRJG+NJg45kquDAud9eZeUzgleR+4=\r\n=y0Ti\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1788-192.0_1652737198053_0.39286209766502944"},"_hasShrinkwrap":false},"1.0.0-canary-1788-193.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1788-193.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1788-193.0+95f2c3d","@bodiless/components":"1.0.0-canary-1788-193.0+95f2c3d","@bodiless/core":"1.0.0-canary-1788-193.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1788-193.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1788-193.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pqoKvybkUQ3M70b78LDxJk3a8VJ9wV0pea/idocZSejui+0O74Hf7zQyaXkNiyrC/6gKJaNVmMSUMZJeX9KLsQ==","shasum":"627b9965fa0d24915901ce509c5776acc1d0d336","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1788-193.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYzl33OXd3hmIgpVLf8PX6YzJQBn1urTwCXKgGkJqKXAIgCuVMRxnpxMGeNWhMQ64uHzPdbYKpyU27J4vQf+QDLyQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigsW4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPOw//WrbMTa1+/Zhuxzc2cu2DpOB3Ts/W/dmV1J3RaQ9Q2mXmkND1\r\nGob//ZXwXtO5MpeFxXPqLY5WVPzZaY0alDvVLB6iZ4Io+0pCtlsLC4GuMzmz\r\nxEGCaRUUim18PEsm7HoiQREK+Bnt5x6Fy/ctsATuDKFtI0PxU2HwZ45Eur5O\r\nNmJn+gJJm1T+umPj4p/Gv6iyUJ7OAcN31KRgxFfpo6ESaDhZKC5uWi7lCxUF\r\nvSoHU980uq7/JgbAyPzbX6AA9/PdFUC9QgaYcjBsRyWL4dyMPVZuvx7QKPT7\r\nAoXt4ggukuXv6btkPStvJ2Ju9GfYVbdAd0tag+MOrkbXmKbLNRRoVN2/yf7A\r\nbgj+DQWn/98NnJrndkh9DUZlJA7GVdIGDaPk0BsHG+G3s+cBuuqZtDmIdgz2\r\n8tOmbuodSdt4sXmGC5V0EBLLA2x148G9BzipmXJEhFGdZoeR3LnGIgb6/oP1\r\nDbZRkflAMMrprb63WSMFg33Q1EQl3OtOQJHOCwZ4wwo1bzV4sdThHzTW4MJ4\r\nwx3gv3vrwI5WNBiuG7fYVOmLJs4mRgEad5w3xHavOVq08X6J/cRcsS6lmlzb\r\nGYhAUAkKf54Xb61b2IrA1vTShyirb6wsbbEaj/RrBcteQ1fsfbJX3Sq7KAIh\r\n31ygx04FdFoMLTbJRexslZDGTlqooC2n/ek=\r\n=6gzC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1788-193.0_1652737464444_0.7971410226314808"},"_hasShrinkwrap":false},"1.0.0-canary-1788-194.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1788-194.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1788-194.0+95f2c3d","@bodiless/components":"1.0.0-canary-1788-194.0+95f2c3d","@bodiless/core":"1.0.0-canary-1788-194.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1788-194.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1788-194.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-iOOgJnj0dD/BBAwM9LYfDGYfRn+nq8F/U6pT/4hF5W0DjYRYTvQBIOHYQQeklzF2kdxvoWEFb3VtXsIypcQ+xg==","shasum":"251b00dbdb58e27c25100f1f44403fc9f574595e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1788-194.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDiNgMseBCfMr1VQ9RsCYQgaqB0rweHVQdtsw53kYsHAiAcOnZsHUCJpg09m+NNNwaBV2aX+shQizg6u1bACV5mWg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigskrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0UQ//aYafWuXrC713ulgNuKbokcg33vZ7vqtGAruKtBFWLqwn2VmE\r\nlVUsn3AFN2h8gHRxwSZD0lislLsmqSsuq9oLo5glaUocj9wzM3T6Gd9Jqu0c\r\ndF04PexnfM4IvCCMvJe3276ToHXOU3aP4UK7aawW0xVCxRAY79+wrBE3rith\r\njG8SWZM7mOIA8ZpHxtsGtvv8BdEuqc8m9ZyI+I+0mZWqV/6Lv5Aqa/zF75fF\r\natlsDupNzrFHhH84qjIXdf9L/zOcMwju7T2cIWgnyrCJaTYBSEmX0NyBtTl6\r\nGnsCG5eP7OAPQg1k1uAxR7kWeIk4vik1gy9R+KznmXKhrOjMjA+O/FgHFWkB\r\nTCz/NTl0WATV09vcR7UV9KxfsMRSOI8Euc+zXck5tvVKDwKFFNAw4X7eIQu7\r\ntNQlTbs04yGPoKMw/CvB5Az3uAbKYt2F3SccxZpmFsizn5n00ev+GivT8Fg6\r\n89tHHGTlaSXGfvPLQYxw8osyhNHeNyfidJT73mIYHd0erOeslgDv3gqPqOLW\r\naooM5X0bSR6hcvwLVbDoVaYiuy4S5M0rkp2rjl/j75zPOMWzUh4yFLA4tuvV\r\nAkV7ZmKnHde4vnVA3z1Xt/vhMFHlKv8UBoSKIQHEMNjlYhtaUJ0+5vs9LOhv\r\nLNT+0BpTde9HuMi+rI3GbTgFzqkhOSGvc0E=\r\n=vBJl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1788-194.0_1652738347461_0.5235455688010804"},"_hasShrinkwrap":false},"1.0.0-canary-1647-196.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-196.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-196.0+95f2c3d","@bodiless/components":"1.0.0-canary-1647-196.0+95f2c3d","@bodiless/core":"1.0.0-canary-1647-196.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1647-196.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-196.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-CN+e5NNYEuqUoEeU8rCcLGMAj8mlkFiLfCOpTaaXyVO8Gz5CqvKJCXdfL8CewUZx1bspTfEeDazDtRkPtBVJ7A==","shasum":"98e3a98fe7f3f64b9cdca671334a42c08ce354ab","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-196.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5OHhFdc2u1lhVEWNB3VIaG/TkzqlPPuNnjBj+UjAYKAiA7nTjmbzrugAn0i3LmW37jKp8tdjA4y0KBEmSkrChAUg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigtOnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouZw//QrcBoea4BcUS+J5+4MJ0pJNPZgr6CbxAdCn+IDwQvCgN9TNI\r\nO7WWaxJyyaGDLUkgJ1u8pkkcyrxJA0OR031JrXyaBwV19UIB3GKb55j4/Ok2\r\np3fGx9UQSudAYHbebmSTZvX6WKF+4swyw3mm1brgP4m0x4nZig4QXq7XKJYv\r\n2t1zpkY5dHvi1LMc6KNqfCdFWGWiwRI1LHyn8l2Z4wkS1XoIHY0TqFlcgFb+\r\nmkwvZtNNFvTGQrTPw7FDUgBw0Qvo1JFJhxm5veOOSJIUnVE825L72eSvuQz1\r\nJK5OGOfzr88iW29J4KyNPip8XwtujfzZNzqroKDFzPxObcyrS2tU1ZWbd0s9\r\n6Ir4vfQj0E62bvYaR52w5RJc8rOWYAhYyFoTPDNJhD0uOtk25igqmBuC7cPq\r\nERysjXSaZBkQibaeObxYcMK0H44oI8tKCsI0dtrnzMjrIF58S9rHX80Nz1QH\r\nAKp3AoJDyz/aO9bfO/ITTbxPLD43tU1ddIlr4qrJzvCiwiefA6vj83NEmJQl\r\nD3xJ8i6EqjdS39l/znKnQ+7R+w1o5UhjFCKTnzrWz5NxUKYx4L7e1WUqX4eP\r\nRwEL/xaKkHv1EqpEpVn7UXzMg0ME/1DaVLzdpLHrZClQI9z7z2qrAn96J4mE\r\nLDQMfkB+EbCzm5Z5o67ZWLjkYzECwM7egzA=\r\n=Qx98\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-196.0_1652741031019_0.14472561571374487"},"_hasShrinkwrap":false},"1.0.0-canary-1647-197.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-197.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-197.0+95f2c3d","@bodiless/components":"1.0.0-canary-1647-197.0+95f2c3d","@bodiless/core":"1.0.0-canary-1647-197.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1647-197.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-197.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4LDYQKSEazvOjVdSpRJfSXlGVLSzUt3wBqmGgTaFwL5zHrGk6HQsme7ipNi8q9HOyGVQASTNBYQ4zeb5a+WSsg==","shasum":"3d3bc6655d6fe2a3d06e4b4809f3cf20bc7a46f3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-197.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz45vpn13a62x1GYwF6PVZuPzKI0dhBOgVQVckoQIqBAIgRhUTQtyW+1RRijYQwTzoP2FcdmySlavgbXfWROoTPfY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiguRjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD4Q//f97a7a+R6DJuWeQQFMebB07Afopq0IsjlYT8hJ5gECTDZBEG\r\n3ZlCSW0fbWfZRgtQZDN3QCJkfJdccMPlUb4dlxgjgvVFAo+IwNHwD6WGW/Ts\r\nly3MlJ2ablpKAY3Tvi9fOaZohj0qTt9ADm/8LMmnlsAxDXx1mbFBeLJkfuPO\r\nd9L832qg9he9x3W5J14Odb7pp76TtY0FUu06o/P+k17p3ro+OJlNEy4oVvsL\r\n+XqsXLqczKPteliawxwkVRz7k9cvsQ+Qx5ZmoxAdLc4h7PD9tHR8iP3S9oFZ\r\njugYd+Sxgedh2SSLCevBgoQy9MB+O5pX8g+Hrfi9BqqOXvb8YyJdTAOar464\r\ny5KMZlYZch53kh/KbjCUjoJXBq5lFCy9YID3BFxq5/OZpMnoJn7r9Pi7XrXu\r\nGZubT/QK7OkFtCCKFfaLg95ZsQsWBoBQCKnbMaHP3YyffrOxRM41uooGMpO6\r\niGYVtv1caz8vmnFU/ow6p0PNPglaZ/hZB8rqTO3Jxu+M6qHK6vYJl98MhB2n\r\nC35jCm4wO+j6xc3j6OU80OPaveUW4kGW+WAL2GF6lRkImd0eUe5CffJAl9l4\r\nMG3cCyo9bOORW5CwiReL5mGt1iCFVkeanM05pxAPQlJMihITB6LzhnVVzpEy\r\nnTmevrKHjZEcsirMP8VzhL793OwkQH8vnz0=\r\n=r1uI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-197.0_1652745315386_0.7914638355313355"},"_hasShrinkwrap":false},"1.0.0-canary-1487-198.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-198.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-198.0+95f2c3d","@bodiless/components":"1.0.0-canary-1487-198.0+95f2c3d","@bodiless/core":"1.0.0-canary-1487-198.0+95f2c3d","@bodiless/fclasses":"1.0.0-canary-1487-198.0+95f2c3d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95f2c3dcf06c6f51bb6b3d252ca6f4f576899dd4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-198.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-692N4oU1TvdxodWVz8Efvzeuj1lKKvoJNzw4mf7fZmxZLGtoktQ4lY1lS5UdGex4NfLmEeQFKzScTRJMq1oXsw==","shasum":"71d40170b8365319133f2ec2f735ce18232e689e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-198.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjxy9TRsQDwgtTEc/VpTwMpKhYfJ0SElbSP5yuQSp/nAiEA03bY+CA1Htbt0PE098a9892u3v4CTyblwAAlAh96ED8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig4+lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqZw/+IQPyEToA4voBM6KWjJbF1/Xt+VyxVbWXyISe8NmG+QHdZKHr\r\nRGomvG+mWrEeuJK3mHlgza5R2GMSyPqXBvGpdVmewlEllpvBRCKvBD/rZ8uV\r\n+P0GHl42QihGcNHMVSwp0PgJRLovOBK4lyze0kOODuhs8L7R6dC2Ay7SaP1y\r\nzVOGbCn+GtOBzCOIao2mV6CscLC1Hf/M/bTSqqTpaI8hxiGvVidLIPe18uEh\r\nxOOcsFTtWkbbpFdbyUpa5Tfi/lg+nwl3vs6lFmwsQqUoa83wqmziE7aZ3tfS\r\n2hads1jQexSEwSXanBklwDfAI4RzXoDxT4yTHzD6CzBeEnHZ89qZOgiSdaxD\r\nA8FdoweDt4rR/UYxTWSbb0Rlcx3H++nILNbfD/+gGNdB0qxX6eMxayI7xoSF\r\nNcv2Kqo0wS3GCBmowYZEu22DnY5dYNvdbC9qSbGRwEpuuLHOZXORm7JxsdrR\r\nSAfgr3rrx74SgbNqcP9urFvK2ofHckOvQY5Ochdy2BxcmVUT5yLxm6Dpq0Df\r\n9QHD2pGickjtzoEuJizs0TdEA72ojaM04t9ft61CzFsZifbVNyX45FwF2YRW\r\n+1GxsZ4ySlfJ2ql0EeveCUVNjeJMFGcor0D2DJXJKVIJgG1KiP6PDbLePwcm\r\nHsJsJbc6hntn8qKeVbmutjaIAHlPnJ0MKbg=\r\n=4Ewt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-198.0_1652789157615_0.08031158541837913"},"_hasShrinkwrap":false},"1.0.0-canary-1778-199.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-199.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-199.0+d849a5e","@bodiless/components":"1.0.0-canary-1778-199.0+d849a5e","@bodiless/core":"1.0.0-canary-1778-199.0+d849a5e","@bodiless/fclasses":"1.0.0-canary-1778-199.0+d849a5e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d849a5e892b83909873c0567308ede67ace2176b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-199.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-alq8pZiZKjpJecG8BTwZBSahU13vhpncCBjMwHzCNy5LiYlMxMJR2kboqepZVdIAyuhAr+2V5ClvhJkL5MRcgw==","shasum":"a915b0b4cd9abaa577a1a95317bad8a4bd937473","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-199.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4UqmvurZIekuKXLKjQvGnLxy+RaLq0o0WLdg+H0lFCAIhAO4s5+PRPwaV/PlJpOYcWeOXQxcSdAoyX5MmPEhkuiQX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig5l9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRNQ/8CWD5Ha1BR+Q4eo7YAws/b+O60lInS3WrSe1IrTE2xeiZEzP7\r\n3XHL3quIfPPSY629WRggBulSbrcDxoszdcphA0bKvsq75Wm1Kx6c5LrLrM/f\r\n7Ine4MZgnF9P+SabTxHNuQ66j5ydesChAPSp8mmDKqUj7SUpct5RTfye/Mdb\r\nd+BwBeI7eUnGXCTMCWduhVVSRc/gsvckoJkUydwU9uOCZwanHMr36C8PZa73\r\nI3EJteu0bjwlIFe+7+48Ub+4f6PmM843pNzg1wz/D76DY+8UtfXnZ2+O6RXi\r\nNUn/SQ/7sLfhrQ2CaccSpzUdMPhHeLylKFODQ7V1B46FVGyQojuawsPjCdBj\r\n4p0Hu/msJMowcqvf940RLKFWdR5bOpd4jsVlpBXjrzcIL9BRT7INKmGmgPqT\r\n6nosh0WFD7ea0wPmBd3MMVub6i3pvcFSn6bG/arpoWH4VAaKPCZ/z6F9j6R7\r\nb7QVW1RJ1n2dvm2qAuRFY9NXxYS/LogOZrjVKEEuKG+yYj2JBddtBQK6TM5B\r\nqxi9bobwSMcm3TlXXYZjG8hBwgCex5boi3h8gXGFHtOu7oSWpckWrotFIAxe\r\n775PPzNy3NsFwLGfEj+vlPoBq1a2OAKhmB/D2YD/wMhKSKZad7gwUhFnOSUg\r\nEuBj0IbVxljTu9buG4YSW7G9IEbo/Cm7vSg=\r\n=kUjD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-199.0_1652791677624_0.69603502609235"},"_hasShrinkwrap":false},"1.0.0-canary-1778-200.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-200.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-200.0+d849a5e","@bodiless/components":"1.0.0-canary-1778-200.0+d849a5e","@bodiless/core":"1.0.0-canary-1778-200.0+d849a5e","@bodiless/fclasses":"1.0.0-canary-1778-200.0+d849a5e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d849a5e892b83909873c0567308ede67ace2176b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-200.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-HmWFNF79DGJuTJg28xmhoZyLbCHX8150ZTJvt3Hw3R633wBjAETsiq2BuPJrHRnqoBZS1HA9W1cdPqeX+gtdKw==","shasum":"2de9f0b146a515fdd9ab1886589c6bfcf65b499b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-200.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDAZsAq1UWJp/FKIDmbs7fjtRdzRf4twe8cMrYsrxcemAiAWz9qfe60obT108X90FUA+mHjHQbf7gCzcH1HgbfC60A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig5qoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO9A//cpE7nu7Dn6W6+6a/z5JSQb3oyDa/90GKhrR6a8WFQpQ2LdqO\r\nh/v0NlAR+Dm9+R5c3vKZx/DPcgzEjaQkGWCtHEmJkaOulyiubCtgL8uPEwMA\r\nHJVR9xhs1fN8fyRMQLbOtyoIrW9k7Vn4pTI/3MoOn8CrCqp/gGZvg9JUDJXU\r\nLyEl/pfGfZhVwCskLaab+6/4E69b19/1kbKRxvrfwWr75aoLpttDpuEzbR61\r\nrt53nymRN/6r5M5uquU+s3Q/0UKJWkzeVaeGDhPUlIRutgnXzm5y54dYXmSJ\r\noLX5r67q255V94Q1uvPVxGlp1AUdw9wmgK/689mBdkaBKE+UGBAHyCvjA5Po\r\nD2NXml//9WQkdc94vaA458ATIf9q6Bf/ZXPTMK7UnV6lH0Ni6J6RU/8DU5K7\r\nbhUec9V85Ld/a/2rse7qT858wBHOOgy4Nsz6M5qeB/+Rr20gDVjGKeq8Jraq\r\nH6mjWiDU6ZYuvEmZynnBqZGEGCUcCm55H8ZlH0Bb2G1iFiz9fJDqJ9HUYZis\r\nMdLP4hA0/LMKUmjznW6SHuYR5xgbeS/AJYAQ7zSL6bbROvD1EhZ0alfyXoru\r\nj9Znv8AH4880HjmY/EyVO/veoM1LWpmUX+p+3uoAr1x2ggdXf3TZTjQDj2Se\r\nned8kaB8Ut/dzX6I/5LBSxTyDjVkOobIbWY=\r\n=1zV2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-200.0_1652791976041_0.5936275643505273"},"_hasShrinkwrap":false},"1.0.0-canary-1487-201.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-201.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-201.0+d849a5e","@bodiless/components":"1.0.0-canary-1487-201.0+d849a5e","@bodiless/core":"1.0.0-canary-1487-201.0+d849a5e","@bodiless/fclasses":"1.0.0-canary-1487-201.0+d849a5e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d849a5e892b83909873c0567308ede67ace2176b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-201.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-LsXTQwxj8SSP1m0ukzuG1zC3a9r0ZV3t5vXK6V0ad417ptjFJASDwNrhfFcmUjstxmzgwSFtQI3WD88TQRXN2g==","shasum":"fedd62e39dafcb2c2dd95fc372a3e6280d9758c9","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-201.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBE3TVh7cC/fQHMA9SzgtX0LyEUI8DJy4BTMI5PCIfYAiBsfBRfXakiNW/qJel1HNSgwVB7dcb+nxB+2S8awo6Xlw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig58wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpH+Q/5AXZirn5f5NYZ6k5Dn9+/IacvhkDKJdWS4huL4Ylcm1qVCOlf\r\n1v1CTejtGz4hlF8cBWznLWYuuzXZbMMdcN7/QcGISdcjV+o2Ty0o7x+0MNIU\r\nPXrZTYkRpDF/EdcqsRgGNsusTT5lFUB9dvmvHZqoCs/wYGd0N6Td6sfZt0Pp\r\nTnfiYvvK0VWccb69Yc2HtJFWOEDT1P8rB3l5YjfNGcyFa6RHu3HDO1kzH4sb\r\nlE46n5STP8Wcvm0UyMcQFORRAlH89clpY1QpRFhxBXWLiBKL15iSEm6CRadb\r\nPHlSoYeQW4FLkzG8qwrhwpxW4h+rnYxqbuztmwGO9oHJbCDwp6/v7ahYMGG7\r\nnPDJ6zrlgos82X1BUCNhyW90XFxOPkfCPY+d1QM7DEc6PIMVXiCSfS3jlGjj\r\nTv3knJoV17P2R4e5Iyw8SM/QUHz2I8ZgR9vVH1oSX3sK/6gZakVk8hO8uB7S\r\ntuT6i7N3IIKFNjL6+3pSuZQ32Qtobjv6Bw9ghf2SW6oHAwEyzYd9oAkh3rp1\r\nD4cLZflR/Y1sOFjfz8YsGQY6lYohXpxyXE2cdsSdP3qbyIr1efPgU9Jgqw2s\r\nrwofWw3udmACq/V3Th8lQuRO28UiKLDP6kFsNlTJUU2uNEpOmitKjnDlW7WP\r\nL93myJZqs2pClaMcR6kGJ6shTr+55qFkmGI=\r\n=2nc7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-201.0_1652793135805_0.05446151992305315"},"_hasShrinkwrap":false},"1.0.0-canary-1487-202.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-202.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-202.0+d849a5e","@bodiless/components":"1.0.0-canary-1487-202.0+d849a5e","@bodiless/core":"1.0.0-canary-1487-202.0+d849a5e","@bodiless/fclasses":"1.0.0-canary-1487-202.0+d849a5e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d849a5e892b83909873c0567308ede67ace2176b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-202.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-mBjO7DIKcKkL5T8DRrxjUQ3eYp65V4vhGjXf4NAluj9HPD7xkJ4gJPgIFq9o51uHDyr3xORJ9JjZpbvxvQfCQg==","shasum":"c7c6d4d6f378b080f39eb7d771d2e41f41d91126","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-202.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXIMtk4k+lkQ5mNWKA/4eR19pY+MM2FixaetqUbQ47ZAiEA5MbE0d2ApfNMPc3rc/qVUQghg0/NuCoZTTqV0AO0u7c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig6KUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0LQ/+Ny/vBVpjiqFLxPy2Pf7/PUTM33rbDVN0Evnl+mN6Q5Wpwptv\r\nC/rPyyIXbzOs6XPuusFZxkoHLl1MBe+zx7IVtGPH2zxg3BNPosg91UXSVVJS\r\nonLJBsOF/j9N47n63SNwdAkuSOpEMUdZVn8mdI3hzBN/tspur/1GpTlpeKxK\r\nrhd0BynQf/UxfscRkvU8IgksBc20nEUuLY9AQNAO5rnMpBMlDOZN0KwXp4zM\r\nGM0OFjrgqZk4ibQV2MUzL55MmFCtzkOucXUYfuQEdofAXF2lrX3tqpWVuob7\r\n2iXPYfb+p7msd0drsCcrrQzp5Jj+wbCzoF7V759nUalvTx/Ww2Y+GDW66V8B\r\n0lfNqQHCoDRUJgVInnHHo//WmTsu2W0dBUydKLU0d8bRpd7W0tQ/a595OUFC\r\nVyW9qE0jvVW57Gd3CwNteNCY7L9NVuSdq6ewp9QmECiKnJaL+X2DHkv1thmR\r\n4wyyXKjnhHJQnEYDaDIQWgN88ioNwLlP5U6p/Ou5pkXXSd5TN2PvKdKoKSN5\r\nvUXAF/1aUJuAg/Vhs6Fg3jH8UDtusaB2aBj799YrH99Zehsl3Ol9Q0dhVBze\r\ntg8iD+/uBae3wuDqzxQOGjMOjDNWepB3UtoVH+QUXYsWBDbxFPJmwtZIAy14\r\neqw0hcUYVh5+Z/FTTr7BMB22tfJC0wixO0I=\r\n=G/b2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-202.0_1652794004244_0.1352961766344991"},"_hasShrinkwrap":false},"1.0.0-canary-1635-203.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1635-203.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1635-203.0+d849a5e","@bodiless/components":"1.0.0-canary-1635-203.0+d849a5e","@bodiless/core":"1.0.0-canary-1635-203.0+d849a5e","@bodiless/fclasses":"1.0.0-canary-1635-203.0+d849a5e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d849a5e892b83909873c0567308ede67ace2176b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1635-203.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-WlVIo+sZAjSKzUAYvnr25I2khPoYWs/Fzgs41qOeL/M9lGOYVOw3dq2ic40M0yJItrq0w4yt3ZBihxcoAu8rZw==","shasum":"20ee2cce8b746f4b03086fa36975af79f8cd2fea","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1635-203.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERGnTdikGGOdsvkrOnC6Wt7cj5Peb4L//wXriLwcypjAiBDuIyi0FXTgCufKsqZBbdP3cY75im6EE/4vwIeifh8dw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig6MrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGrw/+MFpn4ff6g+PN6eU51VDvjohRCD57ZrbmmUbNNSlqMMLOMu9B\r\n+6ryAu4Ip936jvQypeoyJjaVnEChLAwSlgO0rMOYlnXVJGTFpqO/hcyqHtqO\r\nTKS9fdxL1XaPVka/vmtBD2/EzZ3YkNMiLFZeYNJHBt0imNi/clH0SMHVfK80\r\nTDjeWAxRRnCVYWeu2K7S3bUf4WsAJk+brV9wJyqg1GPu8CtDfO9aM4k9KrCF\r\n77HOHzu6WloiGAa3SNizVTqYgzOmdFTNycJxOxi8Nel25G3dqMVkNZGZOdU8\r\nFgqLrcB2Ss/M/WVfjVJUZrAxDB6oAejLhANAyzd2K/2RxCSthzlVMqW4Czkt\r\n2WQ/cO71J+yT96TRdPlOo/tM/wUcCc+3Sj2HfYl4v1iU/8YyT90+KYKRU0TS\r\nWffx6ceU90cUaXojrYPethB1pnknt8D8voj7u1drH5pst9a1XkffmHQjWJXp\r\n/TuCM+sYFEuSyjQOm0tSxRT0iGlo1DZs8ndotmBEUv2KlUqh//x+Tj2bX3pu\r\nbwYVEhhwhnAn+qSshw/dG4BnNr71J9sakMbBEstgFE+Q8qSONyFscLLB3d4G\r\nMHFFFGc50bvfizVwoE88Dcmpj1aa5mQ/TmbH8dagJpHQ8T2KEWfhxXae1EWu\r\nhG4CyhRxx2oQH9Hm2XejDbFx56v4hpkQ3VE=\r\n=CrEW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1635-203.0_1652794155064_0.9650970106610508"},"_hasShrinkwrap":false},"1.0.0-canary-1785-204.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-204.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-204.0+d849a5e","@bodiless/components":"1.0.0-canary-1785-204.0+d849a5e","@bodiless/core":"1.0.0-canary-1785-204.0+d849a5e","@bodiless/fclasses":"1.0.0-canary-1785-204.0+d849a5e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d849a5e892b83909873c0567308ede67ace2176b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-204.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-RJKLOl3EHN3yeqlwMcuFN2xFU5ZiUP+sBrdP+FDDgm/YxtJuX1loyKP/HdrJ1LKhU+RzPND621oZAn0wvm54Ew==","shasum":"370938adb6340473b34cfd80eecb968236a6a88a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-204.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJmLqkAFat29A3YZl4Ch9Gl+5o0gZQjtkI0o97u0ppuAiEAgN0ngaZeZpHjvpTQq5ONsKNe0mCmywbXG8UZ1HttsdA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig6oyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4lxAAol5FNpBdxtxN+y3dHS8Ksj7Fp/zjQw2anagdZpD3PmmXym+U\r\n554cg6KSbCUWLz6IyLIPezM63TxKuwTmYkFfH7AEvn7/UlqBtIkSZViTvWdm\r\nknZSIRFJqbk0An2BF2cItdAvQrp4NewQj4BTpsOjjQKmpM3RtsB/0+oMl8AN\r\nDWlh1pQhMCdA5KPB/ENGhPAhWo4IBsRXpclCPlRKMnVV5ZHlpCMebAu9I9TJ\r\nT54xx5o6pLp/GJalL0n+a1evhFlo+WASH1snaJpYzmVUqi2Tfn7uU2zsXVqW\r\na1UIFHq2cslgrTVbjELQEK5BtW2EGeNw1kSvtcNvowromYpeIKkFJ9WsFMDP\r\njT6xcsa4QxHpTGnZRP/soxieB3PdKI3TSDbQqigy76I9hUJGTwfZ7SkbHDQU\r\nSx+/xsKJkqVnOL8Yrdil+LpmR1uwugSoWdUZQwPNj+ABqr74+neXA/0UWFgk\r\n+5al0VJwwgeuT3wnY27CLuyy3FgXxctfTgfQdTD4uyZecJN4V1sYxX6iuZD3\r\n9QrkMuGpxw2YsBjsOf2ydAReXKxwSD0Z8l1o5o+j7c/q2oWE+jB6dk0vFxdW\r\n2kqGda42VB3Ixt0IMDFLDIeZ2N4SKzmVrYxtyKZvD+BIAcWXAnG/lYjThHPb\r\n8XvalTqxEFLIs+Q0PhTTRBBoHmUCcGcC56w=\r\n=iVcx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-204.0_1652795954184_0.8620572386984695"},"_hasShrinkwrap":false},"1.0.0-canary-1785-205.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-205.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-205.0+d849a5e","@bodiless/components":"1.0.0-canary-1785-205.0+d849a5e","@bodiless/core":"1.0.0-canary-1785-205.0+d849a5e","@bodiless/fclasses":"1.0.0-canary-1785-205.0+d849a5e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d849a5e892b83909873c0567308ede67ace2176b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-205.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-oXXrJb4YEQKRJLkNwSX4uKpr8dXMb2hx44jLy+At9eMBgWm4Ys+bJKMJhyFZ5S7Z9N4ea6nUN0f6eRNDMBzyrg==","shasum":"ce750f7c5863f7df09d9a8283a7f4501cd13d9f1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-205.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEgXbsmXsPXQUVaPrwySGLJBv/xS9ygFBMWWTWopfi7wIgalgxfUx6NxcUZaZIioRgFOxBXW3rV40RVRzglu86jus="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig6sJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopGw//ZjA8D0vNekcSDB8SZ4QyZdpI0aaNsIsrvVzr+Pf1bMfcAMyf\r\nFGXRF+bYtDHuhF308IO61gB2oygoNZ7jEL9FTWSDn/v7pA/LenMN/EB5Fqdi\r\no4cTqlqiLWLJOuKouu7dkrLF3mzWXa0QIzeT8ENhWTer/9n0/I41VlGTHxJn\r\needT0wT6KvwZDumCStlOfQVoy7bARftFs0BynOA78LPqrk07ArWcmvO65uie\r\nRfnWUEyNoFzBhPV92v7t00SjWbJsfzIRTyWRVm6NUb4kLdkuj+hIIjcLX6UN\r\n+eZxFOX2ruKP+z1+X32PpsU6+aGjWM+/rlJsqHb2aaRPo8AyfQogbE1A1zvN\r\n7gpX3p454ueveUBC73cZXtKSWY3z6SRZ41Eaa/w8pOFaZdE4y1xfxTJMLsJL\r\n8A/BFVghMLLQoDHd5R8Tg1McAPhEoccg9LhSCP1W0dVsMnbH/beFI3qBxHdm\r\nWNYM/74EZ65APmPhZXFG/iqs//t0Hg4+1MLYJOiRLzKYzSu1wdRlOqGFV2Vx\r\n4haDvvhk5FDCIAkH2YTrJofgtMznyo3DQ0VOsBUE274LWA3Gq7Q+AYyQy2k5\r\nID+sikaeWCKaGjVIypf/mWFMNYrWHjK9nwDLXqV/TzSOt/R5Lb5UcrFVIB7a\r\neq3BSy6kSIJ2tcDffB1B+KaBhaDmnAWN9FM=\r\n=lWJx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-205.0_1652796169141_0.29753008232879186"},"_hasShrinkwrap":false},"1.0.0-canary-1788-206.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1788-206.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1788-206.0+c4fad02","@bodiless/components":"1.0.0-canary-1788-206.0+c4fad02","@bodiless/core":"1.0.0-canary-1788-206.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1788-206.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1788-206.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-8YXZbEc9SdQuzNcNa/IAIGhT2AssjyY6mIkT99+KSxFWbyHPc1zCzFK6Q4xGsDW2WIAMNeNoRwh5SWI6cIm9zw==","shasum":"749eb98ca9acd5b530681d3389e27890eacfbac7","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1788-206.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBc16RzfggJVbswzqJBwOVFAqJ65QUHzYXKrr0Da+ewAiEAg62SKrEIVBmJI9KHOfH27CIJ5vEVXbRy7r+fmwaXJw0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig+e/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0nRAAmU/0EON/gEHDFX23hPm0v3QMC4LQueoSn3a6aXFyd/0hd7MV\r\nHCABYkz3jsgJOTX+KkHplyl8Ol37ZKWSMxjST0R9a9Pqw4juI+ywa6lMdRkp\r\nNtlmN1LkEYvT1jCfEPKQUgB0M5muFFFQwZbIR1WoFPk4FA0wX7hJbYbYQNlq\r\nmxysTVlE5t4gQeJKxZaWDnDAibHoDM0DCdaYp3AIDW7aDfxFXkJgJfMJZ44P\r\nHqMlB2f1ty+4YxfBvovOSYdIgMZCOl3l+tMRYk9PpzdGibDdzvyuPV9fpLFb\r\n/ABSlqd7SpLPoEqgx0d7MqYxy3Ho8qc6bEmgfTXQxVqRaJOueBDps6BOoVwZ\r\nZmWRctEp/+FOxJpZEis3lWvPzV1jyIY2HMZqXHe4K6BYtxm1en5T1nh/JMNK\r\najMIhS6+1WCDKPYiKUWH6w0OuRCF6BCPjK36en894ZsY3tzcAVLLOwGJKVU/\r\nky6rNp85nYZBd+/BMWzEeyPQxvKaGrt5DjGGEd33nzsFXn7PzUeUsGCHcAyH\r\n033tZR4x98N+97GzPCeuaBBKhVCZ/qS05d1cKxfQUrayX8f5awx93WWi/Qdr\r\neIXrbkcfnRKTFlHvRPwUtq9y7rLLwW0aCl4IPoGJ2Vyut2Xxdfw0udyPf1JT\r\n2ZOWn4zuFahFNfJ7BRmzWSNNuiXJMqkbdhg=\r\n=VVma\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1788-206.0_1652811711529_0.6551523644891588"},"_hasShrinkwrap":false},"1.0.0-canary-1786-208.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1786-208.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1786-208.0+c4fad02","@bodiless/components":"1.0.0-canary-1786-208.0+c4fad02","@bodiless/core":"1.0.0-canary-1786-208.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1786-208.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1786-208.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-WvawdTP3YfNb+pF+YF2KRtvoYVop5sEE9F+cgGYvpXSCOj27DNWD1I66yubj2xY7Px02AlOV06WdmHlQxadXAg==","shasum":"f42fe7f91bc3927648b796e5a02e2f3e2fa7bff5","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1786-208.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3iPSh1Wc8oJ5rNT7Gaeto8nPJ3NuSi7kU+JM5hM7IUAiB1sWHQTy6NPq6+4QF2HZ02WtuRCZDdhWqocEjR3J5jwg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig+ngACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+ORAAnfgvWzwstsd5vekf2AHu7bXZTJgPnDW23jnDFqMr0aI1Lq7c\r\njUHw3bEd9/NUwNNmWMA+Gx/7UKHzV/xREN5rAu2kfPUCkt9AXNaQLeryFKym\r\nFW0c98B73Bt8PrLI9T6tF30eZD7smjKXD4zKIBHfsgwbjNaGImkbG+kGmAXI\r\nMYAhHkmLSQg4HGSoKJ8s0py1qo/1cQfx8UQmDCwsylmx7sJEbGcQjXRzwND9\r\nZKir06Dun2aRQJDnEYtNrICrgMbvC1Jqvh4HmI1y1TF2jzJLEcdlFoU3U5cV\r\nW1epKmNlhhJAia0kTvLSJtqhbz1sfmBhYtKEAmOal+QgPDtynsLq9lupsWJY\r\n5/jeFTdvfIyERhtW/3AzoeDD2zqiDAxqJDIlp7FX1jdtDGHdhReuvft7dSmM\r\nDRODHMfXn6IuYShdndUUU5bbDDhaC0Mz/stsd/DHZKrAmXKiOWZkVA78Agtp\r\nlVFj3HTDH2Mk5xHEDwHxR0rgIdtTZEOjqhGl95O/d1+59ki8Br1o9eK1k9xE\r\nUrlQ4NnIiiZQbzidgcpLRM8hRCm4qCGwX7Sj7uxJhbQ9F1wAHeNoI8jD/izs\r\nxloIn+L4ZIoEs27wibZMa0VSaHx5foMoIBe1XWuRlvRNcJDPIOwwC8MuP0Yv\r\nP14vJ+YJEy+bVhHJvnIHCrmqOiuIYWYi7W4=\r\n=Dkp0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1786-208.0_1652812256131_0.596122524356081"},"_hasShrinkwrap":false},"1.0.0-canary-1781-209.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1781-209.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1781-209.0+c4fad02","@bodiless/components":"1.0.0-canary-1781-209.0+c4fad02","@bodiless/core":"1.0.0-canary-1781-209.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1781-209.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1781-209.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-oju0hDxDzGIJLWqPZFeQz2s4c0vIO/kExBWfB+37/Zy1kXORajAnJkxGQPOVh/CqlC69FiXpMO7MZ0h1zDxJaQ==","shasum":"c5c49c24a254b3afbd55e842c75a8ade9bc72e52","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1781-209.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+ZejZyl8wLSxZt9ov2STLT7nZIo+7pnG22oKtZ8EJ9AIhANvmdDaU22+S+VvFy+ZNYl71QxGlPi8isxDBAL+RMcyv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig+n7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Vg//YXyibdisJL/IaBZiWTp8oOHKusjSmw9yuthLVU9lQVn5bz8I\r\nIMnI3eG9krg8VZ4kS4Tq1c++UqMuE1nh9WX+DIo3/EBOx1R3PorHyEpkj/hH\r\nTDCWerYAt+yJyl3uXYlbpR53N6KmRCK5tynJp5OYjjkl77epZVyHarUEQJjO\r\nz0s0X8DdJHIVRu8hWvarpXVQtNU/YU8hqPKcAdO5T9PfSzYdt5c+dL7efEws\r\nSsqoaN+a74FnwXLqW0LsXz3wY+8OrhWMDLWqkte/GajsRSd9fBXPErE0Lnmw\r\ncV9uJ64MvlAiAoT5oOYeoczkAnbgOHWQDPjhkPyvelLWob32z4j578bnqR1z\r\nz91ETBnnARdJMTEFP0SNPc28DlarANCF7j7pxvAt4hbmqskC3MnnrM5EQJPM\r\nXhajrqnDg2RICChvIGgOVn09XSAErAkQhWidbRjybzszF9bbrx54gKfgdocH\r\nNvYkFLlvyVQHpJZ9oQhOICi1u56hZQna2A1zuamym9gIfcy8iDCoguudKEgH\r\no28VYcaOS3u9FoZAZDLtDjJugELzYwBCyEhn9vhTYupdC3bPrgNprumMKlDW\r\nvYnJsUy1EHuIjKRkTVVkuy2hbGSAwkAbO/rcwWIxZXl6jEkHbci6VVCzxKuX\r\nazPKfgvUfluPaXSNsMPsZv7lyUBOe3IbjnA=\r\n=9rrc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1781-209.0_1652812283608_0.09626245676745016"},"_hasShrinkwrap":false},"1.0.0-canary-1787-207.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-207.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-207.0+c4fad02","@bodiless/components":"1.0.0-canary-1787-207.0+c4fad02","@bodiless/core":"1.0.0-canary-1787-207.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1787-207.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-207.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-lgb82osfW42uEAnMqhhpbr48RCmMq3IeyKvbogs8hH9GJN6fHzBt4H6aNQsJS9i55FewIDCd3dzdpjWSAUWrew==","shasum":"39762900a9eff920f016097d1f8c5bb25659255d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-207.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlWEJNyc2YyR9AwrtayBcLQ8ptnNEyy6J+ofbg0htxsQIgaSJw9tHPAb+2YPKXZ1EafbbNkJojV8t4d0VYULg+mO0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig+ohACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotYhAAgzaCDYwRSrrAtmU7P/xa8i745OkkZ7e095CWE+YawQzmLIwk\r\nDUgvJe5hsaqmMcd48Ryz78TK8ps6balEw4cHh9qH8fctJD0SKZtK/Pop4x8p\r\nwPfTQ5Vqj5rhpkkb23joBifDAHwAec4zCgMPlLvlzmkQ2t15dH/4rAMh6XhY\r\nB24Sjs8uUhnhMwu1aMIcc8SBd5q6HktMT3f2XCNSDUZZxJmuq4FDPSNmHM7Z\r\nLgwVsaJR8v1gsT73kaHMdIzhFfyIBlC9EZH+tOio3VyXvx1pPE4/lijKG5hL\r\n+JWRymMHPZZmR/iPTCXC689+cynK+hXeoJugddgr6Uykb4mrBmLDzS7FH1bl\r\nDakGZZZEy/7N1geFSaoDlLxBy8K6uU5m+wNJhJHsck+JTvaUxzfSr8zqD+5P\r\nYaNqX1XG3trjlmRkVSvomJEq/I3Oor9qyniEGRtp7KMLGvFHhEg8kwJaZu7Q\r\nMykBtU5bgPYy29mMHxDlA+oP/rI1SC+O8jdb9kfgEdNDx9/ZNHZd1ofWJ7HI\r\ndu3YSkL11SBjeKwn2/J/pc7eLVGBJmI0PJT0B6Jxdhq9XhsuTduzN5YZhhBK\r\nvEQfI1tpNEbdfJPMtipeWd98YuN76RB/zrgyZeZp8/F6ITy6lAfD/nOqLe9F\r\nJlnlvG2xqCnspSckFPW1hhb+9nFTTz4i32w=\r\n=CEYZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-207.0_1652812321344_0.07525622685819355"},"_hasShrinkwrap":false},"1.0.0-canary-1647-211.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-211.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-211.0+c4fad02","@bodiless/components":"1.0.0-canary-1647-211.0+c4fad02","@bodiless/core":"1.0.0-canary-1647-211.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1647-211.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-211.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-escJiIpLJhnGUhQPfAAvNYWux8DBXWD8Z612eORTYvgtvYBh1TBHypUewpxUQrBW86zasbgNX1adneyRlZkHFA==","shasum":"07c896857bf2ba1abedad34334e3f26d564e9fc0","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-211.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuyAgphFdFfQoZlO4yO2b6hDDgMkaXzCDWK89cB4J4EgIgLpHj0AN0xdyQM1YN2DNY5Y5GTIzlDqfq9eyI7p6xEG8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig/kIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfVA/9GPCmr9tBzj2UJG0ribqQAOgVYYb3/fjjZjsbrbE5fIVTnZA9\r\n46dQW/wCc30FiJ3yeUXoUWFSLdq+dCLnjQAm97bCRFIgs0pfVKmLMfRL94HT\r\n8UZut2uvjpcm+JDnHjHjjsrYvt+RMWHnOqK/RbetFoAjVr5Af6pq8I9APoPv\r\nyY+mZeWqNjXhn3m0yo4vrdGYrAtIS887FED/6/xgHL/f9AbrtTePRlALpyuC\r\nogCK/ro1H915e9ulLxnaKuJt7h1HP35Wujn8EyPL+DdCkYTLpYIzMnFaybNr\r\nWCi5Y3spQ1vZlCm6tSSD0YxcrqA51Ry0WVIElcgpVraTRIh7h2/CipLS14uX\r\nMBfiq4F6zbol4LX1ezdsN7+XyGM50iw0utoEr5Ks3ST4GW5Vg7e5FCiKw+Nu\r\nh2k8VJY6woTy4E72GS2m+HnUiZRUsvtey+gppW+/MvDUuPy++xiN+2YQu8Qu\r\nJj7jdQaTrh5IpyhMnpLVOqorTvG8xcP3poHYxVEvVNFS9Kon1qTmvcexb9Tu\r\n4k6sm1DydcZFjA4uobEcFdud1QC6i7LsMfEFdoyaAMMgHhj85Zq/94YWgnSG\r\netTX5z7orSBAqbYdIhovaN51rdxogjst20miUOso7HqVPuqJN7/Nd31t+bnn\r\nMt8u6u9Zm8X4uOO040utHUGc7xUBoBgg9E8=\r\n=0sdR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-211.0_1652816135887_0.8677321536506286"},"_hasShrinkwrap":false},"1.0.0-canary-1790-212.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1790-212.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1790-212.0+c4fad02","@bodiless/components":"1.0.0-canary-1790-212.0+c4fad02","@bodiless/core":"1.0.0-canary-1790-212.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1790-212.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1790-212.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ZHog+/r+SzRh4B35hehvjxgFLO/GZ47pGZRRYp+K6lBXNngXxdgX57k1+/doO17w1AIAkewAtxTEbrF+mSSAYg==","shasum":"ad198d93e604441de8c91fc6a83f772d86dea721","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1790-212.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkuI4HM2fMCMN+tuUuukyuGDJV1evMFwXpnsfTSOjA/QIhAOVXuAYZ9xtPZRWybaFFr7HVYQAtL4AMg5laEH8Kkgku"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihAW9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5FA/+J39fI9wriQMNqUaTerZbN6Xd/xVdrkCbc6PDqwen1j3t4fDw\r\nEgeuFFJ7EDgF0J6vRAzp950LISOxtecLGcC+pQv90KIGH1fiT3zczZEheqG6\r\n92JiCaFgi4Gzrb99RSFqtyXP5egza2hXw2fWfZMPlMDzX1GbGpV7gXGlG3h+\r\nLrPATmwgbvbc380OrFJT5MISZ5inwtuVuXo5sihXdW0BnShUeUw9oVp/If3j\r\nzpGoCg7yax0BAMIaUr3fAmwrlr6OMoS0XAzdeJKKFCQgbT2WtPSxs2ZE22K0\r\nLez1ZpCRXovITsBXkhfhywHEuHeN/Q8LVr2RLR9KYcAiPK027gQPhsHozZPY\r\nOQUe08NDO1NaKcrNrEWnE/njTpe/UK9ke6rQtjFAIL7sQaPbPKA5kOrEvQxs\r\nWr6FLrz7q0Evh2akYRH4Z76IRb9elzHinoe9OOTacnXTcCmbIpfpGZ801QwG\r\nCUQPqqwLsxNU2BHPlHdwPJu0KEWvZ/4Tqv11c4QUhD6QrfeMJfwHE4Q+t0u7\r\nKzGF5avRYK9cDrVg9oJN6WG1rZwv+q3hL9X5Fikz69QSfrY/XpV9MgUkWzTE\r\nE+2Lf2FC9Wu/jr/kXzp1/FoLtXfgfwu4paXwEFZzOh6R+63uedlAMjaxh7n1\r\n0YpDBmV0k++hgF56ZbecXe1alGj5GDPmY+8=\r\n=7oWU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1790-212.0_1652819388775_0.2634600927999049"},"_hasShrinkwrap":false},"1.0.0-canary-1790-213.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1790-213.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1790-213.0+c4fad02","@bodiless/components":"1.0.0-canary-1790-213.0+c4fad02","@bodiless/core":"1.0.0-canary-1790-213.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1790-213.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1790-213.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-7TIb+Jb17/OoXcwbA7zrUmbGJoG4ubGDB6eShZS4EpKaFRTcOJlaVdsh2eP9ZED70JAymJv7RTfvwQ4zJzJbuA==","shasum":"c4085e877a9a234c7a3659e21a0c13d4306ab268","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1790-213.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpj4bSqLsD8QlEdmxKhchotr7WTZlpDlQTO4RIrZR1xQIhAIqRNh1XrUNMG/5SZHLUTTTjgwe+rRPTj5p7ept1N2bY"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihA8iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpxog//Xe/LaUoCympBnGcDnG0VTu61R+Uut2vClM9Tdk+JjN3ahDM+\r\nLDiuMtwonWW/XNjKx7zxynlIl9E2ZkVY+AUFQuYT0eFiTF5Jg9CeN8SHUuJk\r\naC49g8Tkv/dSfzs5BEiYmwCLayWTvk9hkF1ZjPKzNkjGV/tTlmCA/mYx7Gg9\r\neIgs9IzL+XvM8Bt0gGpZvOxAXZRXp3pz950yC/F+KrEYvSKl1jBk01xeiBeB\r\ntrDxbOVwnwsMiiOOnBX9ngYeR9XfHd5GPaR2FNmvc9r0TB4RJ7nBpx7pdDPY\r\nVZkxlCJQ0tXbbR9Dw1c4r/dtwRkE1RMYEflLtgaprCromSstiTd/4hcupMXB\r\ndJst/KEvyqG3gKo0YJ7nht2rBSHNymikjoapIFY0XQ1O4LdN+HkPZX8NsSWD\r\nbhMinC8f5IWYhiIXO0sfw4R7EyVqxqQq5vAhYZVbD6nUfXyMKPJq+GVmxudu\r\nf/wsyoz2WL2XOvDv+oZRbPDz47f6ocd+0u3o6l5dB0pnKAvWoPPAIiAopM9/\r\nNpjpKmYWYHfNRwtc0b+Tkc4UaPOj8VMARKjq+O3vCI/NlS/YRu3CFJKZq7eP\r\nJwFy+dOdBQ/fvLo+Q1NFBkzjmaTjsL/ZrQ8u0pjdCnNuwuu9ALgs76rhETEs\r\nEGLTYb52NC4YuaBpZDsN05yUN/MT4M8J5GM=\r\n=rCsp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1790-213.0_1652821794471_0.9951191755729842"},"_hasShrinkwrap":false},"1.0.0-canary-1647-214.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-214.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-214.0+c4fad02","@bodiless/components":"1.0.0-canary-1647-214.0+c4fad02","@bodiless/core":"1.0.0-canary-1647-214.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1647-214.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-214.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-BZLQmZ01WFj4YKWR2qwtFAD+F/QN9yQlIyd6H7pCHvcgAvB3JJRfmZWUySyfDlZcfGCVXKL1dWdFLxF13YIcyA==","shasum":"28564fc3ae2cdd5460a06127ab449b4fb10a4d50","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-214.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEsV2NaUSMQzhinWEMvwk+AOf1BRmosgGG4TXzImPL/uAiB3fVcfCSW35b9LNTtClGcQ+zLsEcKo6UkazYJxKGsg+A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihBB8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5+Q/+I7vd8H/W43PRZwBqZYNlGGkebjKU6NVI+4ge7UtwaK16+J6S\r\nQ5jpEScmUo2r5zRhxo9MrTmkqEMOUOAv0PUfJf0UCI55hKIHLRXCyMtpDF5X\r\nJ/a6gdha4ujzkATDbs4t+3vgWeNGIQWkahBZ+4dUJkuJw7YyrInWAbveechs\r\nxT8Z3oHKMHS4bn1p16pOIhUPzlVIwmzsiaDptmF2ntoqMpVTTeQ3I4SoBYJv\r\nbx+UoE2KVm5OLhuDpZIByTwbn3yRdkFxZlAFwQb4QGfQUbA54xyjlPBkiiYV\r\nwErVj5cRb0EkEdr5XCQnK6bmqAtoqtJAj7waiEgqICYqPUihF2GtzYrs/Sw+\r\ngFLqPIxesY1rPCYorT2g+wFp/nVgVmER3wrJCzGkLpNKvjqxRIWIKDhm/cBR\r\nLezVvvuDW/fit/lPKrnz79WkMUJR3lxr2rIbc9ayERJCRbrj8kJrnkic65LZ\r\nsK6cQddmt1sS7N/hAIXrLtZeYIZEQAl/XzTT3KPvvQY0NsqrqYCfp8HkxF7S\r\nJODlo0I3B67OLBLKITSYFeRJzcqzeOX+mXw+Dcd1veKKULNX/YGFcYOZ13mD\r\nNWw/O1bpCFJojQT8STSg6PsgePqiMTiGf8QXGaR3APwdVMYtI7o/vIIKtsqn\r\nqn3ngdsE8OZLPcW2UjVFH41e/tv5mC+AqdA=\r\n=YFXn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-214.0_1652822140405_0.10906044225595712"},"_hasShrinkwrap":false},"1.0.0-canary-1647-215.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-215.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-215.0+c4fad02","@bodiless/components":"1.0.0-canary-1647-215.0+c4fad02","@bodiless/core":"1.0.0-canary-1647-215.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1647-215.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-215.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ZsQe3NnHkIxyjnW1euowJ6uJH2UY+jlDjXt2KUTq3EjEb5DdZBPxMrhiJFiHhqLQMD4U1Vzq3hFzQDxXYeGsQA==","shasum":"089a77e497335349401f1758c96b58788a10c97d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-215.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHgILUshNSoZBytdtBoodPjp+4fWKaoe7RTUYkqY3bpXAiEAvz+H9FwKVfnqULCIIV2UkisGFa85PVz8qe/qOfrgq4Q="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihBLsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmra8BAAl6D7b9m80h2YWAOXzTSjKMm05H+6E3CBbxhvKNfDYVDFqTQZ\r\nKP4ALhY6e+Qcgm28isw00ovsJi4O0CdX0QFdSw+Dw4hk3nFjkKACOrBNd1GU\r\nCav11Kfxz1LKjP4POqxPbqLcu0D45Z9bFqeaZcGOO6emJ6DsdDCmjvkKyJza\r\noa9FXzD+/sOZSQGbRMNDGBZeV34kirsJanFxt5FQO22m5NToAGCRugWrRfCR\r\ns1OQU+I5urrvJYZReb6P3BSb7uSrd1L5vn7cz2VZ7defyoj3Sg5cWOrI0rOd\r\nJlytLNKn6nRL8G7h4WDaw3tDvbR3b0/6+l8sFzY/0A5UaCokvQoNScS80WSg\r\nSByUfwb5hYMsspMoL0DA0jIhP65KDPyExXRPg+4PzjPiV9YjB8psWpwd5DAm\r\nrWskm60/0YyaxxtGqJab9sXmLz/d8tgQCVUX5TNPeKz9nJvrO+/JtpYyaVv3\r\nEYWSP5vjNJY0vOZhDBdKiJ19DQcHTsIMrPGJQkfnKTa1AIYp69K0ceGqds0B\r\nnWfnWAvgHatGqCRRfKYmuMEkSkdzfBWF+HET2FpgJoIE+AiV7JYWsAirBls5\r\n39EOxcEteQb7yn+GMH60z1cmpcYXHDc2w6uOMEgODLhnv465wI2GR9OoY9jn\r\nlAlx+Is7IL5LRlNkEl/gkZEVZL2Qx1MoTGg=\r\n=tmoo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-215.0_1652822763962_0.7266463428532401"},"_hasShrinkwrap":false},"1.0.0-canary-1784-216.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1784-216.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1784-216.0+c4fad02","@bodiless/components":"1.0.0-canary-1784-216.0+c4fad02","@bodiless/core":"1.0.0-canary-1784-216.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1784-216.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1784-216.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-BpApVEkHUQdC6TcR9vbnHWPTw3pyiWaBxm+IMoVzPAPF+NwOjzs7EVowZvcjJnk1lc9RBytCjfReK+nBsjUExA==","shasum":"326c093ed7e90196637f2a29bb1ac6d7e2accd47","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1784-216.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6KZr4JgPXhi7HSaC3u8uh5zQlPxR+hRzCgAn0JTVcwgIhAMzbeT1CAc9B2HrkAx2cu/PM9EhrL02bmvYmfC4Tb6TZ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihL8kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoflA//fCJTWPe1t7+MOxKIvHvrUOkQ9R9ah3+e1z68dipB7yUimocl\r\nPAB7VnXTwEg9Bnpvzo7dQJjz6STdAUkBamLJKWQPAlG0yrm+fXtchb/Czs2r\r\npKgTu5ccfXXrbzbacE8EWJVS+VWqzRFDq20NfgbP2l9bES27bZ9qM4g/fJYC\r\n3KJFkGHF9Wp55de/N7L2m4yLQhZAgfw39yTaqw6B7P8QDfNSVs89CdubvqGO\r\nWyKVBv5J33DbMQiRN4wR5KQ/oDTf15sEoRWkcnkBpa2gwJFigVHmmK2aBEbV\r\ngezDBCHUyRHDxdar04u6CxYPDdg5BQzYpPlMWedLBtYdw621AU7EEx6WjECy\r\nNLcc6LFKAtfE4iUZkbFjj0zhbTs9EEvV/joMOd1QQWPYEVp/8y9GPw7RFbHj\r\nF5nR9g10EEqWlGdlXFfyasKuXGfjDGksJOH/4EyC/bZkIp5349YDwHwzdDwx\r\n0/tywMwx1PNTgZ8bW2Bd9qCgN1N+SlUEEIuNG/MqNiOtLpxsNgpVKAkEw/TM\r\nvxIfLS31QarF16e/g88RjsdtzoHy+DokqS/pOQbxfMSxVWuZ1xIfuF/QZkNf\r\nRYzcPUqkP7JqD2LT+MFhoG4PAE1VHacGe7hgBckP+VmtHi9LaQkIGRmiTNqz\r\njO0WBly4P0r+s/WAF3a/RZuq4gwAwztZ9/Q=\r\n=ERe5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1784-216.0_1652866852783_0.8886593658858293"},"_hasShrinkwrap":false},"1.0.0-canary-1784-217.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1784-217.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1784-217.0+c4fad02","@bodiless/components":"1.0.0-canary-1784-217.0+c4fad02","@bodiless/core":"1.0.0-canary-1784-217.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1784-217.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1784-217.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-o9p4Z2acHuAUFwX6YSP99HWP6sd9NTKa6PQtOb6Reztw85kCPihXsDQHltIyI56zJ3eeX2HNI53fdC4X6j5b/w==","shasum":"15eda9fb68f74ab744c40523465a0700522f137b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1784-217.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC79PqOKiTE21maI/mWe69chBZyXVWDx43u951XPaGX8QIhALrzwAmR9GVKtYWlulICdPBVCDboG904gswBlMlh4OPU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihL+yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmog9w/+KyjZZf95RPekqla8aXtFWWSysu49cI4Uwc5aee8ddW+Um+NO\r\nBfQGtYJeWpomsvScFrKeeQdh1U6KP7SpG/sKpCdgeo4Ll/khAE5a0iZ9J90H\r\nWX1EzD7hU13wKAyau7Oh5fV3ReImiFSP8lP2bnKcWe3JQbhmp4PQ9uzKoMbV\r\nElAjMP0VYixDmkQtLCSI7lXMfqC/jpRnZEN77WWVXhcE/m+ijCZm1BGVkyXD\r\nT4aZcjYdfnD6mSobWoTKJWBC+0GB6N6ts8KJ62ubxcaABJLlAbmCHKEaUbCQ\r\ny7hYtA2KwjRzYy1lg1dDwj4KQIfaz6ImTsT0lbzYvzNC/YdFnkywS206TIsa\r\nQoIV8lzKzCkm9CdrF4QZrOsJxTkkBhjvlHkzcuY2CUu8G4jVixmNGOxARMPu\r\nEjdOjQaAELt8fIx+8T1SdhiuprbRPG+jgoa0sEu0oEf5qnx3Oa5/0NBFIgKE\r\nysrOfwLkvXtFMMnrWoeh73l2uDkKv4N0cHqmbPsKRFwb9Tkt38Sp4DtAcs7h\r\nSYgUabHf5EgLv4c+jeoENfTKmnSc2vRU43mS83zV3j6+7dU9fpKSGz9slbJe\r\nsNHMW+PPlJ2tpa2wBkgs0axhANUvC5R6l9VfbLwZDLKtXzduAezFu1af7zz/\r\nYfRE0LuENhAjeFTK9xM+pi5N69iRUwX6PBY=\r\n=WPLM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1784-217.0_1652866994382_0.4634484560162895"},"_hasShrinkwrap":false},"1.0.0-canary-1487-218.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-218.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-218.0+c4fad02","@bodiless/components":"1.0.0-canary-1487-218.0+c4fad02","@bodiless/core":"1.0.0-canary-1487-218.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1487-218.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-218.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Uzh+BH7IggPd2hdXrnQFcwpTJME3TwcJwR9phyMICeXb26zNsGMp1QRNwfj7uydjluHzhelg/0YFRUZew8CQjA==","shasum":"ebfe85f627c4ce2dd29f84a2716afe7a3c68fcef","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-218.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpuE/tCW7FWstYFqJSjOh6j2JLuMnqgIR7dSkkbr++3AIhAKuHGZTxbGUDLzgL21dz4Jf7Hy6mNfZ6quD93s9fuGsX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihOBJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUtA//Z2FRveKwSdZ5O4MAwc2uSGQcjgLA2cR+jxNOvxYN9DYI76Ww\r\nTbljuBwJR2rDmpTa55FyyrJ0zfdfyI6mNh6s0/wjr8jXbSAYKxCW3AdICo/B\r\n9LshASl3vuQmFPCbS8AmLt0TA7G/hbk/onaV7M8oq17cyH1cVeLsmMbij+/j\r\nitMN5VS0+XKwV4lgdlqJ3mzE0JwzIP02cTaMYHm2s0Bk5+7LGt3TPMnerxNs\r\nOE3108LuOTpQVV0pOaFlfcSSB7aKjsNIXvSgX9imynXiKI1zyDUdanK26iOl\r\nSr2ENBUN3HQQA4J2bHC4NDw9VGrdTZXoy0KK3mZgbFB+XB5YPMUheBxQSAm5\r\nieZU7ZsArAqAh8ABexbiiNLAGWLI/VbfJvC8GIjt0W3Z/LmO4tj0/oTCCoGH\r\nbQK0REbuhtEFNmBzmWf5iBDM5VZAq9IPTuAya/Fqs7PVx12d83TniKMKOHci\r\nMSOkDfOBMH6AINvB6Ei8cQ/bGTWwIKLMCFsxgqvXGx/ud3U1dOZNtyKFsyrH\r\nYQyM0Y8pxLPcNp6BguuW/EAMGFywxLvHhpGwvGEoMUCW/MehOpmBhrfLoKDm\r\nepMXttJuTLef0PipDeTyrzHvaq26PjbzeM0I57YjAvwkgu16acy2BIYFckJs\r\n1UCjmVHlzplJUkplFCLloAW+KKftOKLRv0o=\r\n=Wp+K\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-218.0_1652875337648_0.7288539485519532"},"_hasShrinkwrap":false},"1.0.0-canary-1792-219.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1792-219.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1792-219.0+c4fad02","@bodiless/components":"1.0.0-canary-1792-219.0+c4fad02","@bodiless/core":"1.0.0-canary-1792-219.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1792-219.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1792-219.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4NhZZdjNcsJsgmp6dGXv/oluXuUVSNB1NK0eA/dGTI1sq7ru7T2HS/X1+bdbBf0+A1Ac7hUKITJJmBvOLDdJyw==","shasum":"26497646ec08bd07e15054e4faefae522a93af24","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1792-219.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEbuVkUDUK0LNpnbuCkhb0Y37S3G934L6UqHtNFOnK5rAiBrow4eGFoaUO0uJxPyz3bCsoJ3z4QQF/V1rSjE5GSFnQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihO5eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoURg/+OzBBfeuBpQnrm0Ib2DcUTUAFEOPwomCPGZk4h3OwkJQUzytt\r\nmM0gvLbVF1dcJktu0x+IWTLAtO7Eq9wI9p2NsvDax1OkZ4nkY40EYt5IMF6B\r\n7Bj6CXAuF6Af4LPmpgaBksVM6AMEf+N92gG1reXTeEQou25AHL0KBh6StNp4\r\nOioRdFCaVyykIS4xbOdFzGMT4480or/5ICqasd47MCoCcvP7Hsoxu7+WVUEq\r\nO5GL+1yAPOv2JQmCqRc4kKbLv5mYegJWCGPHRJ9Z8S9//jpMKmmBBpxojsDG\r\niNLL4hJy1D7wp8hRigPZxZ8KKsnFbTlj5NsLFTYWYTDHEp6ce5eG7JgyqEwm\r\nvJhLEwdxrNQvr9sbGdeJba65V1qh6nC+U1LqLoX73/z2bTL6Jb3+p9wwXIim\r\nG3QIoc9jFRGERaMagsuSfTVseKmPQzlt9/cvtNorZPj34ASrtB549DX410P5\r\nzRnE+gAQ2W7Q6J6dLxI03AzKgPhhI+d+km6UhBVVrwcoDEADfWEz/oMdLJ6a\r\n4BKKTVTW/+tLflGuKoMmPzlqwGxEmYYPdX6jiikT1R/X/amEAZ1NMGc3jEtb\r\nzl+qDFeWdgKXKgTWh27E4ce+7Ri6GsFRKBKN1/R4Jl+Ssz1X6S8kSZWJ7tj8\r\nZtpxw/9XqjHwYOzFrIG6qy1KulrQ1oVIkz4=\r\n=KS/4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1792-219.0_1652878942224_0.6263703500199367"},"_hasShrinkwrap":false},"1.0.0-canary-1482-220.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1482-220.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1482-220.0+c4fad02","@bodiless/components":"1.0.0-canary-1482-220.0+c4fad02","@bodiless/core":"1.0.0-canary-1482-220.0+c4fad02","@bodiless/fclasses":"1.0.0-canary-1482-220.0+c4fad02","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c4fad0294e1599c7fe311f08dec7ed6f4c645960","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1482-220.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-1vY/QOSZAKzgB8o6/6FB25REIdnp7WXvIKzr7KgfluDS2Bjq9HaPjsItobl0RHnt32WY8v7oSwXuC/b7F2JqyQ==","shasum":"2198d1afb823805e93d3e71ea3d95031fa7eb778","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1482-220.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIApPfvONWXKNbiLYvMxlIyS5bRsSGqJIcc+dJgAlApiZAiEA3BY2pCmoL5H11WN0tqqjt/mGmQQKQNMFL25dx5mE8IE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihPQ7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Sw/+ODvpdWWw2SWJ5vV6JMU4Bq4gdjNdvnDk0LyKgcJUq7xwy4aQ\r\nci2MivslT18V6+cCmVlvxkHeCjJx23u/f3EL6AHPW8HDP4uorEN0vKrIJwnp\r\nXw5BWopQSRn3q82YEHk/plZd4evjTtVY8HvUStTJV7562JIzG6waPAQ3F+9+\r\nDdYqJWIgSTPyNMqbcm+5PPYAM9K6DYLmYzfKrDkpSndS9cmiKtdrfpdneqkn\r\nGwprwto1nWctAYYKbvgdySboSAFP/JdP1Bxd9mwOZv1aEbEqkdco+Hct4Rv9\r\nKcLZwF6looX6yves4On5u4f+Itzvb6kXXD56clkSKVT+FO9mZWI8XbDoFx1e\r\ndC/8+3YgIcPub3XCmwXWuVgikJbK2ePkYPmwnNCjDAZaZfCrh7eFDP4HI/pG\r\n5vd9raJtoXXquJsrxBQUQX6hwCnXJIb7mdHieVEfqCAB/yJtHqoVMEPmX0eq\r\nPs/wR3vhiGO8u6J16/lVEyh0q/msKGPbFN8WalDTc903DzluzAZ/dRe0OOTW\r\nN67/M54eBthXhFrJ4hq/godrg+th9+9IzRrIOhnvExYl/sBqojEGY7Ubj74F\r\nMxNoGzYqoPUJqv4cz043wXcNJKT8jTVI5ih0i0aM6JPigxKTbLiS4GOPrEJU\r\ncrURZ23dNvsxCvCzFou+KwNFj9rTj/BTxUQ=\r\n=l4Uz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1482-220.0_1652880443112_0.3769634596965181"},"_hasShrinkwrap":false},"1.0.0-canary-1788-221.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1788-221.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1788-221.0+021be20","@bodiless/components":"1.0.0-canary-1788-221.0+021be20","@bodiless/core":"1.0.0-canary-1788-221.0+021be20","@bodiless/fclasses":"1.0.0-canary-1788-221.0+021be20","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"021be20132149e70d6db366ccc8c54f468ade423","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1788-221.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-JGgiEP7I1t1QnfDOJVZy4iDTU5t4bbPdPHUMkwFMgVpeSXiB+XpXEdvhVTOmniEkoKf02RYR2/me50PInTTNpA==","shasum":"411265599fdb776602f4c0a00c19d2b61b54931e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1788-221.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdLhOYm9VWrBdJ8/QqIAhRZwxibvmaZAmTD7w6r03DcAiAOJ8QaYJcxaSBcTW1awGSVcccT5EGaz4V/oCuvf3/6bg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihPiXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH9g//TOTdvNK4TeSRorJkCZhi0/Ekdq95aqy9nKYk0YHZ9wUsZxmi\r\nhZUk0Tdkvtm7Us+ItWi3IS0mVOD+2d6VHZOlbMY0HgTY5GWkSmiQlndPAuDE\r\njXVFMuYMyTIXW4iGnn4i3NS4RRWDfoEnk82fwyyhNNea9zTo6VauaTwe6xPA\r\nh6MyOkgV46rsQdKiUIMojg76mB1g/EJcNrHtg9n+XJrAyBZAxvibCqbXyxoL\r\ngPlkMGfMSM9Ua09nj5WCVnonafS/Wo9oBwQWnrIIEyHEQ9wS+an9fJntnVmr\r\nbsAKXC87E+Lz7dmztTpoMPM7pY+qajo8DBcl5qXPqtP9B17z0G5UcaRj+Yb/\r\nrHucuCqQ36sT9zQtCwOaHx2FVfZxK256ltuvCXCBiDNzeYU2j4lnmUiBNuzX\r\n6WnI3RA3HBzaRbmYqXrB2aWITEU7JC6LqMBHseb2Gy/i9sxxaWuT5+5Fuf/z\r\nObHspwz4GWgNA2vOzpuzO0sgvNofl20ZK/ntW4NoKVeaxX06dSyTT7MrpGje\r\nKMzBKmI4MiGlPt89A16YS+cZCBv8x0yleUNiaqqpSP42hTVPKyV9vOXq2cZS\r\nubLHUSj+M4S64z2yrE9Wj81L9oGHHa3RHUkmCoc4chQnaKCQyA8TGJuBgfpP\r\nlFfP2x5ZCntKlVmtnnqMjDDtp530TjVQew0=\r\n=Cm+V\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1788-221.0_1652881559489_0.5716722307295552"},"_hasShrinkwrap":false},"1.0.0-canary-1482-222.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1482-222.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1482-222.0+021be20","@bodiless/components":"1.0.0-canary-1482-222.0+021be20","@bodiless/core":"1.0.0-canary-1482-222.0+021be20","@bodiless/fclasses":"1.0.0-canary-1482-222.0+021be20","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"021be20132149e70d6db366ccc8c54f468ade423","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1482-222.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-kK2ZSUcJVpFUDOJ9U5flwniIQLa/88fep3DrL4m6PVVKaz3pU0Zr4YgXf41oRifw23YZhwSm0q3intG6Oy5NNA==","shasum":"69b6b9fb0d4c977fbd8eaa9641a2e21e81487494","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1482-222.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJ9sWAGywvADhtMYz6kkgK+orQ2LQMhmBZhlAKwp42pAiEAyoymVnO6pL15d9W9/UaXIiGLiSa+7lYStx2cTsWlZTU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihPj4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1Rg//RLcWqlcbNoWCzy8U0BjyJg2GmQWmTA5qn9GiYBISktjHqBOB\r\np+WS5X14jps29LEnYvipjfngxDW9x2H7b1U+MCoLNPJEoikXHu5b46OX+H+T\r\nh/m4WTOhdu0dgs/ib4wi08I/XvVPfzKVWDkGixHkWBDEe+UmKqfhaZg6w/cZ\r\nuznMZGP9ovohHm2fKnpp9X/FdSNWhs9OnSLnue4aqNpA8IIJHW0pOEwsg48c\r\nLb2N3T92bKgYTPHyvnISiyw8ZQ2b+rg+HUeAUoYxQ2BMoIP5E0QSyxuQ0ykg\r\nHPYZCxXJz4XsNR1rOHHlz9towXJaZVRWLQ2wLCdCp5TanCcHZ1ZcOjzlrWNv\r\nxF7Cnr8XXtfi+DNzgfOTEKLwmNSyDLag1b1b4Fm1zI5hZivRT4VSN09nevnL\r\nW87r5mW2LZPyIM/IFwH6F7HS2AXUEooYHiw82iVZIyDAOS3B2L3Np3ZQGaM4\r\nfrT3qJaexZjalpQKCi0txKkHKsBFSyz0Z10LhVWgvQpKIitU1FBrfxz1ffIg\r\nO73OHU4ecSGB0gK/hmwkLZWJ1JvdFfhY9lDqFLWlRXh5c/GYCSXphi6cpvN0\r\nYd3rBr7PiHbU9mPXwqHqodM4BkDyeYImMsvvQiKU/iQDttlFdNwUEp8uadHL\r\nmc/EoWlSCr6M/y66ubXE9JBCQqgrKnc13CQ=\r\n=Vh+M\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1482-222.0_1652881655833_0.6813066942713435"},"_hasShrinkwrap":false},"1.0.0-canary-1628-223.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-223.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-223.0+021be20","@bodiless/components":"1.0.0-canary-1628-223.0+021be20","@bodiless/core":"1.0.0-canary-1628-223.0+021be20","@bodiless/fclasses":"1.0.0-canary-1628-223.0+021be20","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"021be20132149e70d6db366ccc8c54f468ade423","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-223.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-IhkSCRc619Qakk5+lPjm7iBEJPveA7XCu9yGRUHMjNSLsfxBQEV0JdotEhU9maggMv6efeUaKI7I69f0wM8tkQ==","shasum":"164a7af092c801366becf9b578679b524d700cb3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-223.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB64/riCpQFZNFXnfdK68VfAOCQnydryW/DmOAHVXhqbAiEA0+WKUKzR0aHp3czrudRnHqFY4RFIiu5UiQaIt09d3do="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihPk7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG6w//d4wetAYUA2PAEn9SawXq2ifJlBs/w/Tq06h6ILFTNk1favtP\r\n3LrwRWYbI/7RFsBMoWCG1DPu9JjfElfUIDhckPlOiVuX4jLZ5YSMmhWkIkMw\r\nd9vl8hdq99ulAfqoFhhb6BTNQ1gjVbR01/Sn/jfTWfOhOkQMtrDFA/jx8sVc\r\nrZHSXrp9Jlz1vZDRWNyrUSXAwYc8C6aXEioCU0xTndumycRuUuXd5CxJY3u1\r\nfUU8WML0AwD+XcbwKQJda61jMhB9KCdzKrG8WDzjwYHpFyF61E9cglBnAov/\r\nlxX5lFaXxqPfaSFcPbkxvnv3bhNPnaQhLMjFFw+O77Md5DJWx3zml6QFDd+Q\r\noRE/Mnz9Ve8NnD80pkJJPz+WIhiFGlRSmWodSdWiL50/7cZJYGc9FxdoHfT1\r\nlE+2AKu9nZG6XqwPs4nQ6uDB3FmLeEwSj8NJvwxN6YaUODjf4gxCf8PpRqOH\r\nuebvej1BU42JvbrEQlT97o+JdWw8aclz++1ec9KIrgFLHqaZJsZHhhMm1wrP\r\nDxvfq25B+PIr/BS6TglfPoSHUZNreacEZb8OLta2gv9pKg7hSSx2kTLHAJ5P\r\nG6C1CTEXkSWYmvXGlof/FqKqfcov0fc8uta/C2OOkh5DHhejlqdej2Vab7hu\r\nkB/HL2S8vE3oPTCvkF5cKuY0HahLRohji6c=\r\n=G2vo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-223.0_1652881722936_0.2582574570535858"},"_hasShrinkwrap":false},"1.0.0-canary-1784-224.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1784-224.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1784-224.0+021be20","@bodiless/components":"1.0.0-canary-1784-224.0+021be20","@bodiless/core":"1.0.0-canary-1784-224.0+021be20","@bodiless/fclasses":"1.0.0-canary-1784-224.0+021be20","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"021be20132149e70d6db366ccc8c54f468ade423","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1784-224.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ilVmtuQKP6kGxK+d2qNEl6Pn1M5B0YGVgVWgk/kmQs075SlXig9AueBp6BgYWgrvPnLxFBWnPh5O5lRNGCpkrA==","shasum":"88049a88f51480e5f44aca6550bb0ce3212b0399","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1784-224.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFncGsZBks3oRHk9xTh158XYod9yYhs0CnFgzkk0XmiAiEAwni/86aFiIzvhEOlZiGyfILb4dUbBnH1gUpKMagNDew="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihP2LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTGBAAmYkX/webnUpWVnug0rzDJBtuSmofjIbwzX0Kbg7o5z82cFv+\r\nk4V0+QDf3/bN763CcBC+S+zEF83ht6Rso6gJ1zXW63mj1nEBgEIHrGSxNulB\r\nvrqIN1qoxSN1Fl8V0yFjLAjFCIsUmpEKzQKuCAUPxkvo7QHEmu1ZKm1NfZZf\r\nyKvZ+1jawqlbeoh5PQ6I+Sgxs9p6uF5UU4IUfi6BMALBDI5lGHFHw/59/kwt\r\nJbUBXHTQ1iaAXefJU/96VfqSj2EtbT+385lzvFzxB21UhOkewyM8Cu3cI98O\r\nbckLCcSHWyvCDM3kJi4KcElHdCBZk4gl8YyALQSyxK/3nMsskRoTkeXPKsz/\r\ne4ov1W0jL9IBZB3Va0jKnKj0z1CmN+wQyMmbNICklGlYnJ4wPCER9L0G1Azi\r\nCyR6bXMGwrj8+JAagycJWNDldH56yvD1CNKCv1ypVirlCwUhS8KnGyfcdnAL\r\n8UO/VyJhq6acGE0fShp9wr6WUJmMRNVRL4MpShxhhzfgydrzmU/q7a0QiVIp\r\njMXCAY5m5yrQ7wQ1yQX+0Y2lMW0ACPVZvXQxYBCxln26AG6AKUDfF0hS4nQO\r\nBF9nhxBfNt7cuEextp0/0g3PEmfRlfTYoR6kReLPAmb2Awr4f/Vvz8D8+HNs\r\nGLdWGGq7mLxFrCyKg8dd+4IrBYru4oUwsP8=\r\n=nLVC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1784-224.0_1652882827327_0.7521556416138226"},"_hasShrinkwrap":false},"1.0.0-canary-1792-225.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1792-225.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1792-225.0+67c3ebb","@bodiless/components":"1.0.0-canary-1792-225.0+67c3ebb","@bodiless/core":"1.0.0-canary-1792-225.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1792-225.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1792-225.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-07k9bAwfYHDE5urxDdGludZtRgSvsEV/Q48IDCEDFRkMWCALhOnRkP8Tp4ZUhe7a4GNkMQIpi2vI3XKD/g+iNg==","shasum":"2a06ab0b2c5b8387227e1bc0804852b2b27241b1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1792-225.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICL7HgXGwWxbJ5XtnJTd5t38Hm4uxoyGYpj/0FIMIU6CAiAs2IcmS1UPq0YFgEn9nlrSvKXeCbaxBJ3JGpJrT4OcBw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihQJzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3eQ/+PKqituyhfai0FhpW9puvlSIka+jC0ZEXw33lOHGt+fFAv2hl\r\njpt4zf1Ay4mx1PCfJNZ575gqKPTQK2YkilnvYftNHbKtnD1QF8FeE2UVGAjD\r\nCo9DVmIXZXlbltRcJ915dcWiPD2ad2mbf5p3zZaXB8uspXUl4v1tg/4ME4hQ\r\n59q8IuBKS+7AGG3oSL2r2Jfx0AMWbBHyvhOffZ+dTWvIvtfDgTNvmJ/qnoe2\r\n5lSU+jXZ7VUIMHED7XJeAZBPOasJEx/fliutyNGZSJBz4/uaBkGMpoNqEYU+\r\nlZUJmPbO6QVN4VgTjy2BT92WVGp6HQ4GCA6LeZtr5hdXhFOXbcB70tX6dmT+\r\nr51A8rVbUPy/SQq4xyiE134ZOHN75OPY8AWOQ3AjbahfDq6r1IGIVgF+iEbV\r\nOwObpffuYHAPay+Wr0kEgXbmmKXgDNzeWl0A5Ch/wHLdVv77fO6reTkrzquh\r\nNUEQnQQ5Pqshk93DaAU0CCEQ4LKh/SoPql8eXFcviwQXp46aAHYk20PVf+DE\r\nonLSThSCQkhZo7D65I51m9YzUTl+SAgCVSOCVr5EfgBAkoXs5g0eMjIiEwgm\r\nInOzx38e/XB+1F7JDDeA9cOATMPV35bbbnnK3kzSTqQvQKm1GgCXbPDcO6Zp\r\n6Zijhxnc1fj+Lv1/kelPhY9gC9mut4gTZNY=\r\n=8ngJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1792-225.0_1652884083401_0.14670824870898969"},"_hasShrinkwrap":false},"1.0.0-canary-1647-226.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-226.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-226.0+67c3ebb","@bodiless/components":"1.0.0-canary-1647-226.0+67c3ebb","@bodiless/core":"1.0.0-canary-1647-226.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1647-226.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-226.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-u89xbHG7XwB+BMm//Ke2A1A9PYCoiAChAFuZi+wI2xSUnVwfGjtGiAVY0XV7FjpJlf6u8sZ6VmSvDrVZzLXE+Q==","shasum":"2bd4ff0d4c287beebcb9b6ce64e28fec21f31f0d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-226.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+xk5rWCtjuR/yeDVCUSASq4eDk7rZtL304PdIwlRJsAiBsN4OGh0/YBQlTBAh+mRQu1RVEZbuyjJUGet16Jy+GGQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihQlkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWABAAntziP5EhXdIQoqb+TWdq0m+3xBySJWp/mJzjdv+0sS4e+Cim\r\n/3C6A1rN7E38lKaQaL1v20M9Vc1ae9BirunV8QKMFzWnjpx8tw4jIE11mfi1\r\nrB2jp3FUiVNjr2a0XvOut2kW7JkldFf4NDgjpTQoovkZxtY86RX5WpB5OKgi\r\n/Kx25iltD9CjBskl83834A7JDWQyAnqIWFZUcjdMco2AIG6jclvp9AJsOJPj\r\n/l5SPJx5bK6hkBGoG/BvYaHaYl72B6Jf62UQ7zXbfYVCeTM8y4RczbYGYGAy\r\nAKvpONU3LqmV7+3BX8zLb4jLlPaBrSkWIDMvRnNwyDdkGkBl9BG7WmR1MbfR\r\nH9jKR9uuzsxzFX9RZi3ImFZlgEadWU5Ht0BSh/+ykng+xot0slUcRGEwBQqJ\r\nUo0Uqu/pNyXptdAddoWTgi4o1CZsX8V3tGfwwYjacyDGxAuXWYJNqeEcH3a4\r\n3Krg36lHhMkD9ezfuultZV5cZAwRftp+vSn3pKmcgJ2Auy5/GXIx8vWUnVqq\r\nM/QmdfHqiszTe0lQBAXvPoVZTyM35+JJl11hkNBdH8SABStMIotFd+JC/gSQ\r\npfu4xMTY7U2hwTvIdnDKlAAIf5sLBRV2ZMd5wkZGBLr5HeftpeYJdAni6ucp\r\nLP+CjqvCx7IgyP20EVVbpDfumiZVur+hcdQ=\r\n=axX7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-226.0_1652885860643_0.15086273132388217"},"_hasShrinkwrap":false},"1.0.0-canary-1787-227.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-227.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-227.0+67c3ebb","@bodiless/components":"1.0.0-canary-1787-227.0+67c3ebb","@bodiless/core":"1.0.0-canary-1787-227.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1787-227.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-227.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Mijm42wuCwWAODEtSKvIPapMmK+jYKVravoIGeR4Wgqgkfd80qBMoqXdmD1MrG2c5OpqRHW+mhkvgZFoh0E35w==","shasum":"7daa8c239be189d81fd3bdead132d3fe9bf8aa2f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-227.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGFP+POdzClKi5jDaHCtwWis+wN4AsPFdztKa0oz+oFAiEA/3+0JBOEahOhEOzYmdMpzCKDf3eS9bcA8oNlzqX5uTI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihQmqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJiQ/9HEFaB6sTNO61KDjsT+ha4rUrt03gSbfFxRN2aMOsaqQpzlAs\r\nOjJf1KKvrzEFs7WgN+aJFOmxUPCEDxEjtVFtnUYgsYMYQkifEf+lFPZc3XE6\r\nUV50JFpATaDLJsUcR45wfGz2ybNpcGO484pc1ULubg0NW3mmG625aoZjI2Tl\r\n9b2oAESdA530rgWS5tG+B4tMaPzPKDFQV4o9AiC+JUua8wr1Evmu4KJeh/KJ\r\nGxbPFZgbPbDfTFwHjCOQ1PBXjRhYtzd2P1w3xek9cXEnrPfXyrGQ+RJKuRlN\r\ncee/w6Y6U8UsVQFwIRdEzif2YqIHV7kKNLekBJs7Az9I2/VX3TTEQUTmb/88\r\nU+vnCRmx5GGsyTYFVpxj3Sj7lKvr4i4LlppzeSNTV3DQjs6yD9TlYuU/TqyS\r\nu/WXzQIbUBIBsDl9UfzPHbWmiF11D+kJMiJIBA5ADy0lBp/nyI90fEpG8X8/\r\nR2BGbnX3lUgC2aUgq4xoYPGXXk5czR280dKYgimMIW2D7w9sCHY3Z2r3xUB4\r\nJyryyhA4pZcTdJgKNHCLdMGQtWVFXmdBEAEhWrcfz4Kwj4xP7zy0vvuKy16R\r\n8qK6O0Vf3b3TAHVF14kE7JmaoWZJC5GiFk+glNFxQmUbi49d9iufZxKZy2KP\r\n77VFuTwNwZzwLkPmQn2zw7a4FiIeiJGH3Uc=\r\n=W85c\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-227.0_1652885930707_0.8210163914566122"},"_hasShrinkwrap":false},"1.0.0-canary-1647-228.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-228.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-228.0+67c3ebb","@bodiless/components":"1.0.0-canary-1647-228.0+67c3ebb","@bodiless/core":"1.0.0-canary-1647-228.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1647-228.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-228.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-rZRnNkZcBJwAD4HmTqQCbGUtDu/ocMp5TMwRynrlyDqTwGSvj76S5Xi7uRXcXD0pKpdgxsnBBNXlT5DzicCkTA==","shasum":"3261ad23e00e1cdf37ae5e98657b84a09ef90c0f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-228.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOH8FlA/ROeCCQOT5IjanpuFhdcjO9xq9ADYvSs3pYwgIhANz1LDyeXSJfizlJA8muCh8cjMW4fb01mmG3y0h3yb2y"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihR4PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooGA/7B2mAiPeSFNo91BRPuERhn7ZvgEamkBDR2l2DjKQA4FkYv6Uq\r\nMAV1EEHVua2DQJ5tw9EYYc/dhOAhXzV0QFjXStlpkuigh7NEITuvi/Vmge2C\r\nhBBLcGj6C1+vA41fp6ea/P+te2yU2HRv6whuRXDtkV27lV9UloYyHlVRbUCy\r\nupdx2SDKCdgdfevmsbmwLT+n+1ncHEcLhkw6PIKNN0D7964d8EkyXwYps82H\r\ngz1CHTlRnrk8LrZwVeZYy67byTkT7Uj2kxwyNjl5JqkBNWoJCnnv2zheJ+k2\r\nPWNKQsUn12NoLjZonHtumzW9z2q8XsVGppk65epKzelNde/5rcz2C60UVCob\r\nijy1txhE3PR3cCGaz0iPSzrd78NOIOzaiFMU47Y7XJj8U14cKpmGZSr8T6cz\r\n56/NmzP0e49JTh2wnkaHwHXMWnfyQEywtHEgEkOnbdCEAzh4ULHMpgIlWWX5\r\n1yQ6dKzvVMJ1R/RL89zY9HzlbzexElsHpZVTRIN7jvTYdU3nsIJEL5H5dfGd\r\nc3UD7ndCpkLrJ3qoNJz/huRdxlYQD2DLinuZsNmMF+NmlF5yiTKfRz7GUGta\r\ndd1PzNnPFo7QtSLP2Nbl1X7/AskcocXWcsI70FYnL0UUK+PaAMr8ZagjSqiz\r\nipxNWLX9RNExp8d6N9JbP3Krcq4KIvHRPts=\r\n=GyKr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-228.0_1652891151093_0.7764608244403963"},"_hasShrinkwrap":false},"1.0.0-canary-1529-229.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1529-229.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1529-229.0+67c3ebb","@bodiless/components":"1.0.0-canary-1529-229.0+67c3ebb","@bodiless/core":"1.0.0-canary-1529-229.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1529-229.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1529-229.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-YlC02A8XSztlChks62TKZRYUUawJ3hlu3hoKTsy6wYhPNUdoUkseq/jd7YLFSQsWzsCjr7sAu1kx463O5Fa8Bg==","shasum":"2c37233a1e8416ca5dfa19142f468a5feff21da7","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1529-229.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgsP4I4WneIGRjaehcrPV5rbkLCpt0ctql0J1Re76USgIgK2WgEDe29J+7bdNRwwWNn5Sg7QzOgxCQwWoRMcPsQds="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihS1tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCCg//TDbEUvBKJW7PcdzLoF+gNv+HLEpk0cYRWo3gqjwUYdP/Nw73\r\nOKYnOoAimYona9RaQ42mLi98Shlm7sV6l1IcOEj193acxv6M16y+aIPkteHQ\r\nAsiP8Dewusmdb151VMS/7OYJ11WGggiNEwVjPHvKWJOMi61yYZQjKeeHYY9E\r\nxCwpJqE9NwyOklqIHzl+eXvfVoXBxc0DaJPBy+q/4rgn70cgOTHy5dTE5J04\r\nqxOBfPW66hr5XzvvNCCx+7f7EPJjeX3SF6BFHcWo2XsFWZacpiwn5rqi5fSL\r\nhB8zW4vK9BeGuLfoIlA5pqzenbnIzaSmGdMRoj0H2UEyeTZAmrH5Z69U58pi\r\nhYheKDf3FKkYtCaFTkWwHy+wov89obZmhcP1cbBInPUYQaOm8eulbQCkd05b\r\nXdMT1m+IVfj4hDyC6ZEsw7DHyOc0TfqVlT8Nes/tO94o5TQRJXKEufXOdEZ+\r\nr06iOyRCErFIcYaUF02RgixcpU0TmzqLnqK/O5VfkSEgqn/S5Jb+Yph3Ur1F\r\nVzXuFYufMBG/x2OVN83m5kDne8g9qGRRxBEZhK8CbhjMw5aC3nt2RnXxQ4Ix\r\noKnD8qIk6zhWwDETmrOrqJ4PMFlDtUNSfz7Nt8xUXqFEZjE6TvceQUdSrNWn\r\nRIBrn/xqd8uVZsXRBkXQOEy0BgKk8D2puck=\r\n=7+Rv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1529-229.0_1652895085061_0.5482342221299803"},"_hasShrinkwrap":false},"1.0.0-canary-1628-230.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-230.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-230.0+67c3ebb","@bodiless/components":"1.0.0-canary-1628-230.0+67c3ebb","@bodiless/core":"1.0.0-canary-1628-230.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1628-230.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-230.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-plvPk+2d258148/MtEt1f1ayTrCjY3zAEHIAtwWuB5OUT/mUv2XNv3nvY07YQza5EtKU3YgbMhFLv6nCObXaLg==","shasum":"1f20cc926667e45e294eb42b6541038c2843839e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-230.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnZWIYBtE6lyoPyiGEdjaaKqlA2f2EvW6l3RG+UxCgmgIhAIN4iEW5koNHsjFfK38fZL4HiL1X0Nevg/lW2ZP6ItqI"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihTdxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8jw/9FBx4uUnslo7Xlpedhlh5mAMlUB0z5+thNYCaFhLToU8wdxwG\r\n7nIFW0Rl5/AHCy3N1zHdWTWKgqyo4KpQ4KtK57nrQFPRxRortBEf0qWudiIL\r\n+NP2McN4EqCUGE6dk7dOI+xLWH59xjBrWS43xVSf694Gpvs0w/oq+LQaDpnc\r\nWGzU+gGWdHumxRJm0Kv6hwZ3xEu5b5XxwukNz48ojYGNOk5IFSoCc3vwFGO+\r\nmocJecOgUW3FbxNOhOEiHZuzDtuOnmGANzn4i7PPv58eTIsJDujvyvXvFSKZ\r\nEKgf0bcr596WYAHHfXCsJUHv+AhlDRc3/fhkUbdYvYNjE2h1zjZ1aJAG8MDz\r\nrXsluDuWUzDHuDXOUZOysUyXbYlsJWQAWzMQJLGous8L2ih5L4QpRJdlbBda\r\nfkZqXEVqkh+akwn9EFSN0YHFFHVF91d6FhsJ8SABskBMJ+DneDVTxAwX4XaU\r\nBgiPeaYfclpod3FaU5ObB+ByCLNMM/ohzb8OqVOJGqESUuHkN6ITW4wxfHV+\r\nmqmq8MHDMqhgRwaXq1s91JFpfnxFTHakPuOVk+qOVR6el+63NxPwEm4KyF3P\r\nQOf8tqyn1m1J4XQt8QKqy/3QsJQTGU5dBYIX5x29eSTXwWwE1sUETdvrgNe7\r\nY5imS5+1Bm2wmtRLktwB2UoOrNA8Dz6DISQ=\r\n=0vjB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-230.0_1652897648781_0.06224408113125013"},"_hasShrinkwrap":false},"1.0.0-canary-1647-231.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-231.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-231.0+67c3ebb","@bodiless/components":"1.0.0-canary-1647-231.0+67c3ebb","@bodiless/core":"1.0.0-canary-1647-231.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1647-231.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-231.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-q9MDq9/NL3Wgb9LFL/ypw9aga/6QxnPKqbvbdV/gX89crwKn+Om3mNQQAT3m3u7RiRgKctANG4cyNz+FRIbyHg==","shasum":"7fdefcba6d7cb4e3e8b2b17cb053b09eb6884e53","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-231.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBSdOAcCTj+9wE8M0elUqnCD8qBmtjgzG4G/xiiTJKLEAiBMPXm7SBg0Kk2elnzfAP7iozcFj/9FkzPh5khekBRk+A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihUXEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLhg/+K3ZIq/6edKrlB+M/wq2LwNFo+JRCp0euVCBQzxOs82Ua9dGx\r\n1r8tXRaOAjGHwCQmlWZ/vNfRhGwfOrv8+rZEeI6J4EtldKRRCnw3NPsp/XS/\r\n0fKYWZSgGhzBPsM1hbx269QhYMrDgcMuS277mu7icA86lfAjIZQwqnqOFrbn\r\n/89zqy+nExw0JG+31IPAe3iPkEKbf3/mc4hlaF21r2iZhQoaMnNlLtOaatnX\r\nLdTz1nOZEHaRgXAhWf+LC6BdTn511+a1I6yK3tuerI/mjxxbNr1u6vf7mbRY\r\nMeJV52S48whkO8etq4blexScb9oODwsb6lg7sJRBluBU4Rk/6bIj3IUcFUv4\r\nq8hzDj4ZydURCfVm8izX2VxoKcgg8/zB4KEFdptbWIoBvS3hEbb5ZqByL3IY\r\nMqzEG0hnEPLn/EodbINkneQl87h6Btl0wXKe/Nk0eIWF71yLsjeuoCPTGE2W\r\n8WTTNkxomYX8JrEP+WZsCI+UTrdtNHVoi0ZPZTd2jfJidOcyU+cpit98jLsT\r\n7u/jS9wew5hrp5oIL++oLlG+PVOFWQXXGSmtAxXx2a/7nIfCo1wxbCKX4KYF\r\nRWwWT0Klr/f0UAGgnE1OQWIU6NEq7BqOLWpAJwu37yLsfOAuFAqJMiYaLVcD\r\nxl7RyPfAH1AC9i/Qtpts9ES8XlEidfancm0=\r\n=6f+Z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-231.0_1652901315734_0.03275708536200783"},"_hasShrinkwrap":false},"1.0.0-canary-1784-232.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1784-232.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1784-232.0+67c3ebb","@bodiless/components":"1.0.0-canary-1784-232.0+67c3ebb","@bodiless/core":"1.0.0-canary-1784-232.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1784-232.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1784-232.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-7IRCdvcr1VIHfU0ifTXion8w+iZ+oIMiZWZUQezkHd8NJZW/liBZioSCrTUxLzodV+wR1gUtjI4cygdmjA+b1w==","shasum":"335dfa2480f386a36a477a6cbe9e5ac96f4a1dfa","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1784-232.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxpMOA1eJSprF3nf6wyObP8kL3ePEgnng7si17O0A/JAiEAyBNytyl8wjfArXAmLAA8sseZw+/vvC+l6iyWxtW74Qo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihUvfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Cw/9GJfiEDHl+ixr7++3EmK+tOVw4MI1i74aS4Z6//MBl60Iwfjt\r\n0gJGBy82xDulw+M5xpojcaiA3FENqEkrfUMdyjrYH+sCCUgEUvNa1l4Go98A\r\nZ6u5P1kLoMmXMAK/8X5GdsyjhoApoweTN+9d1c+U8TZDfEqSB1smyX/JK+lK\r\n1cVI+lX9LkXsr/XWPbGPoiAS9AIELyGe53MdO90i/6Z+ITrugyBQfTUyEcoC\r\n6z3x6Ngrvh0PLOMFoj8jJL5sHMgO/44GXYQ59yIXSK7DiAaWN5+39wmqkYFk\r\ngMf24fT2rpA+Ua+ZNzu6Zn4f3X+4sZrt15CLO5kqxiVfF4ZsFHegSTtN45//\r\n8H+yX0Wtk0ZEFMWpI79+L78tTQ6WjS8mYUCXq7GfKmjzs81qGdvVKE5idlvq\r\nVAo1I69qCPGMK+32VRUQp6/wbGI0WK7HhFsS8yxZTTUHvpQp2iIfW5dQjgYo\r\nAa4DaIP/wLjkJmzH1un81/MEYfyT3cuBQM4IfL7Wh8k07LofKYkeSh/6Na6T\r\nGR4nJ7IsRuqT67LK96Vkm+Nl16c+RnAEfwjhfIumRh8i/0FfdQL5no9Fbt+m\r\n4PlQv9UgWwTUh9NRuZR7H/95T6KzBvalbs3NDtskv2cEn9VOmW7Tr7NfEcds\r\njT1W0oVhmK3fp4AKhK6jN6eLGJ0mXQEMFQA=\r\n=4gyX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1784-232.0_1652902879424_0.37923956212532106"},"_hasShrinkwrap":false},"1.0.0-canary-1790-233.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1790-233.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1790-233.0+67c3ebb","@bodiless/components":"1.0.0-canary-1790-233.0+67c3ebb","@bodiless/core":"1.0.0-canary-1790-233.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1790-233.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1790-233.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-fUS3RKYg0SKp9Me415uFBzF4IwGVoIE40ws9cEnyjOJrsqRkwnjSzbIZzDtvFBSem+VIaPn6Cm+6N6Cp7zLyTw==","shasum":"e1bde39a222ede948953d22d6db5b37c220d1061","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1790-233.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6wcKeQlqey+Zk/3haNg+OEx6IYrWt4pk2lc/KXOclaAiAfzvgXL+eElBpGXk2xpUlszm0NPBo7wEVm7F+ZNb6r/Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWD4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonMQ/+IwxjU8xAQ8Wbabd3c6N95yjFNRjvEJPVm941Hc39uCykThcA\r\nD/fcPEEOgt4Mq23V3wtIOrKR14Li2Wy7G8k/3C0TeVFEVzDuY1sHOsm2tPn0\r\nbobOA+DXPpIaPP9S5WrHDO+vBaPhGW7HOgzbV4xOXRRP+lbj3r5rn8h2wQ/h\r\nvvotrMemUFpG2prBr1DmQnyTb71Qi4dKr3DPrQsGFt7czNHEcVNarotW7UuA\r\njShbTAsfkGKKV0K8rXX8F02aHow5pf5yQTWpIk+JcbZLregyxOOhM18p2vIG\r\n4h+hv5dHILt63BDpNW9cB6efJmuE0hDQjhA1G7ZCqLgHpCHc6prEOK/VC+sz\r\nAzqnvGmywUPhfH5QWxbKMtfsHexHNHQw4QOvqFvSM1A2Ht/xvbo8JV+fP7fV\r\nlanM1TbBj25sO717qpWMwkAt2jdwhCcUUC2mmo6ytJNevnHFQ7LjLaUco/rq\r\nsl0XguuUvaHTthzZRSfAwdOL/CltmQRUP1Vcx6b1fkTd1weZFl6LbYbFCdaM\r\np2nj3BAterkZegW2tnVCI9krEVZxa13Ud8ZWB+13L84AKSu/gCVRkoc+b0GJ\r\nbUCGehRIpB3rjUeVUcVzBps/EQ+x3Sg8j4yJdZR1d1s0sMWetySJ6kHOJYbZ\r\nmYyVHyRwwujmxvj1X8GupZPmjxZzfhprOP8=\r\n=dGSh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1790-233.0_1652908280432_0.5274618546942633"},"_hasShrinkwrap":false},"1.0.0-canary-1790-234.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1790-234.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1790-234.0+67c3ebb","@bodiless/components":"1.0.0-canary-1790-234.0+67c3ebb","@bodiless/core":"1.0.0-canary-1790-234.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1790-234.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1790-234.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-KKufzEsmT7wmW1yhPH1XcUKzCxvc69BuZCAC7i1P8sAOQXiLRYsvxC5lXJrVUXha5y9wrKOfx2tTZX/cpLYYFw==","shasum":"1f1ef0228e91f00703e75ba11b905ec61e35c884","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1790-234.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBjdsJAH1DOvDvARRfzmS7ZGjEDW0QsKGFlF9oSGg+R0AiARirG2tRLthQ2Oc4PQEpNgTDsQhVujBJXMNCoDpTHwrQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWRzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpinA//SFYZmdsUhuKrRBHKuH3E4dfnwbwq1dQA7+ORoHWvMC1UJVS9\r\n0fE2CdxuZ6p9e8w7IHhs1+UWQkRr5x8WdGhU8GO/mrzk2KeLbqNEWZ2Nafe5\r\nnfN8EL8MkCS65t9edYa01kQLnFp4offRWgmEyNquTivzNnmsmeqcXoi73LVQ\r\nG18LTyDjFYBXPFqTTxn9+VyY7R4twPrEGMEdybqzMqDNihcFgNUG/VgbOraa\r\nQacT1oW2nOMZwHvNBuL5aYUeQ2MKSVj4MxKWXaH4gxJp5Gm/MF9HPPaEIxZS\r\nAk/vxdycAJ2gnEPocAlJMONpnSfks0EYwBAsjXR5hSGmHAjCmFJ6dmbsNb6+\r\nloPAWuiheZHoj14YY2WCoCKqEasVI8d2UxOT6J66beg/wNezeFKHqhGzJ8Ii\r\nEkDEyhsluAppS+viGXJAqXTo/FqKydCFW+fmr/xbRBQHh3l5cQKckRrXmVlY\r\nTNiBJ67LmIUp0+WoH+md9//LiqRPJvZgjuPpL5V4rlpq8xEbEZlROPl47toi\r\nELtIvz+YqL6M6BZkuWFeOomGvImfUtluKSIb7UHX6ipVgXMGWCzvpASsNtWW\r\ngegWVfCnByTC7cn3XjYXStI6iqamJ4aNSCZFOLssNjnnXfnSIVR2N8UgdBVY\r\nyH76aQx7/QOoPOXo4fKTMuX9dbEdWf6utOY=\r\n=Wqlt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1790-234.0_1652909171400_0.3646148701219811"},"_hasShrinkwrap":false},"1.0.0-canary-1781-235.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1781-235.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1781-235.0+67c3ebb","@bodiless/components":"1.0.0-canary-1781-235.0+67c3ebb","@bodiless/core":"1.0.0-canary-1781-235.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1781-235.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1781-235.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-XH2O3JoCnG1fYnAYrEpd+YZoBke6c2/NBadb5acw2xtA8kBG4VQezv+J1bKRy5DUHw5AyqQ9VJJrfZpqxU0XzA==","shasum":"81738f8c662ba306acec0953ec155f9b6c4a2a94","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1781-235.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHH+Wd1RsO3XkAbVnA1tJ042MLDfx6QGYyJljVuBc4EKAiAXHQlrN4oeQRb61H4dLJNnl7fEpgkmaHBzE0Vk/30DsQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihXKsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqciQ/6A7MmVsk7WqIYOK5uTuwd47LrzI9lS1RpYr1cdY+RFvF7IdGf\r\nkQkxcUmMttFwXLaRREdd07tOsbRsLrAM2oWt+E8ItwoxTzB0S3LSudF6iCJl\r\nWnCghhBvrPEn5Vk63koOwMTdwthIzItBI1KYvXc1v0acTKQkxKB5Hch0K+Pm\r\nlE1yULkO+Q/1n6qhZAr1nozd0PwKHkVpOt4wRZIxNjlRTaUakpw/0zTMeSga\r\n3Xk06Fm6bv5NiYIsq//h7BI0EPq7JhSwcCj/cjW5Kbyd/l/LFTznT1o94w9u\r\nlhKbl8gxKgJUOffq4fkRHmQ/H/GNo5zXCQcmGTCRZJwVjStYoHiht2F43KEV\r\nJYXX/WG7g1y91bcGpCbFEdZEaVoG2HktgQPvuYRrQoqRYYq8mZKD7z3I0NyQ\r\nYfhgoOlMJJ6c2MUOLXv3VGqilR0liVkzklyoGviJYBuABGaaPDE+cTilaRPY\r\nl2Pf0HF47LmGQiZeT2JHNHlAIl1rarnaX1Jq5P3MyOVKzQC9guNgGRWdgkA5\r\nMnM2RicB9RB+nEqZdeyShUUbNA+sqLqky5r/vwe6HUiYIYJkAzZZu913+R9A\r\nmaCLZ5Ory/G0zGp62DEvKVi09JapdMXo2b/Fnvpoz2ROzgk+PKvrFjJbUtQT\r\nQkH/8g6ey6ds/X6FjSy51howTNmsjL3rH/A=\r\n=IwZx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1781-235.0_1652912812291_0.6753921480377036"},"_hasShrinkwrap":false},"1.0.0-canary-1683-236.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1683-236.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1683-236.0+67c3ebb","@bodiless/components":"1.0.0-canary-1683-236.0+67c3ebb","@bodiless/core":"1.0.0-canary-1683-236.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1683-236.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1683-236.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-vNYfw7f5r5cnLd/PaSWDvlWHS3qCdyhWVFFUzmJfqn6/Ujcn7b0aaQVcr9yxzr77sbd1jlOW8kOt8yAiV09p1A==","shasum":"5f2f1f220f00e088cddaad79235064ec99b5a38d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1683-236.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9kRSGwwKAFWXrR5uc/JsojKHxzLfceL7wPMI3AHpqhAIhAMnM/LiLQb9EwnOEg/oHzZ0YdTwpzMlLqX2enr23r7M6"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihf3DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVfA//dnB2IABRKIUXJ4OMwpJzEuGAYpB6Ou9Rr3pMZKABO/YZGPn6\r\nHuqkOScR0ERdJCPNUR837+rYvLOiz/lyaJ+YMjhwt2orfJJrpxF18kJ8J3dv\r\nfpsWfxfT/TeHfASl5ApVggMqq4zaQ4s6VZUETXkhA15L+m6nDA7OST6VF8hk\r\n5s4MlHCh82TfZgNrJgotiS3voY5xxNg4l/e6mNy7JhuxK4d9WRsmpdKiNFiz\r\niqWRo+Gjg1TN+sXPiDOVGly/NfqcH3cXBs08Z0oZnDfkcbCfoExmRYKQFnvv\r\n89EpeifG4tLkWuL5leSlAjioMGDMAj/wFKnaAGAOBixh1OXCAir9Ugsf9FzY\r\nIr2R5XByYDsQh3u2D/Ms0xQNgiQQRpcvmAg0khUEJorxExlJW7NkJWfr6Gtr\r\nFGyx9c3ibq5gKgqGGOn/hPQAMwtViJ5XlvDqYdnH+zTGdFgYHLaFmhO5RALb\r\n0tqJhanCVj3SY06MtxC9LuRSOkdsw05pnUf6xanb3ndTN4LrTIKsOC6PPQk7\r\nCH1GSZZGSLJyFJJarSCb9/a73PF+63lNkeF5o7Setv/7TuRkHFehJMTRwTZN\r\nrlcNB3vo51F6WqzfxB+VhalFeAmdLiauLuu37OFWJWijohINlYvcAx0S+4wt\r\n/3/UMgibip70yWdVuJvr6pNXqhoO4LkS+WE=\r\n=TV7n\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1683-236.0_1652948419048_0.3516408222426288"},"_hasShrinkwrap":false},"1.0.0-canary-1794-237.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1794-237.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1794-237.0+67c3ebb","@bodiless/components":"1.0.0-canary-1794-237.0+67c3ebb","@bodiless/core":"1.0.0-canary-1794-237.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1794-237.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1794-237.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-+jCnrF7wJVU7IdG1tpFrltVTkKvdvlrpeY4O9ZGcInUfhrscfkQlmai86gu2wQDPPOLB0BpP4y2o7p/kehNZRw==","shasum":"e5cea0f47dd8c46817474e4b5d684ef3cf6da850","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1794-237.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHm73w0tXWjDNswDLqbEj4iltmbJ8gXOAa1JfIXBAlJ/AiEA0xpSmbAY5ubzH8snWy1M4JS9zH5h4yiOnQPoEvk8HDg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihhdDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWABAAhWbb0LuaCNQOY/ufucTCvhltFqqiPmPMdS80WDzQhuKYu1gj\r\np7fvEzodWGCDD3IvSDs5GuiNWw7RBElGDvCdsDJCwCPbnR5cwe0ZFOWogwTq\r\nwx8LmgI2NCp0g4E0TY3EMJpBxH6KdMLRTDXfT974A+3I8FO3SIstDc79zSs0\r\nS5Ej8IKuXnxkVvri4RKbRqyYARhHaKvhSiRINR00hVpmRNI1gd2s7QaNiO7e\r\nLgKvYgwY294MX/TWbmwo7/6Jn17sHjOR3v7EEqyMP3Q6hZ25D37qJEBFO7YN\r\nLcKSP3BBTZA5+8nqIDWws/wqCKH+av8qgIovicmR6+TuPQg1hNDaL1XZAgGn\r\nJtG4jff24XOL50+3/NWE7JJuvmlGUpkrzf0ppTdqtTT+FymAcr0ff5/CwIBb\r\ndAHgb9A16KlBTXv3OJ7nMCFcbKlYhoHoLoxJxaaYF8kuXyfudG8q3skFzVNr\r\nryW1Jx9QQ7iISvaC2arWKT7wx7HlaI7ENiuld7Dcd0VQLG+BuQyEH1W/+Hq5\r\nqnm9voFLc83KyMuK6T7hd41aryf9AmSP8SoG53hPhixCqQohemspJNks27/a\r\nIoKypMd2GHwtxRDQ8InZA5OCdkd9OmzTRCJIFMZe7g2Yve1O0PPMP26pj1tx\r\nAr7ciaEL8JIpStxhp32A4Y6h0FcewM95jMs=\r\n=le40\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1794-237.0_1652954947659_0.8320634263453648"},"_hasShrinkwrap":false},"1.0.0-canary-1790-238.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1790-238.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1790-238.0+67c3ebb","@bodiless/components":"1.0.0-canary-1790-238.0+67c3ebb","@bodiless/core":"1.0.0-canary-1790-238.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1790-238.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1790-238.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-2eq2x8Q3SBhrXesD/W6gHZbrQS3d/VGHsYzkhYrBkJQ/hY1uqeR5aW27aN79J5JO5U5hM/J4XCDNGiYfEzOzOw==","shasum":"c294dac088fbee472b586a5d7b46d71302f33b7c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1790-238.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpdVDYfR5JAjffJ/ZoPPVysAGP9lnUtS6w9b6MJZG64gIgOeVIBpRgo3oYiE39TP9HWCar4NroSvftxwFudHrIbVc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihj7SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCaQ//dvElultnyKHm/LBu9dTK4hAdXG5bNMVuX9+FubGu7WEksDBA\r\nHWjCvL0WAq6fhzF5UTatMtbxzzBQEo/6G2uL/yTzrOjgidY+xftzfGBjXiSJ\r\nQGeBczXgcdtKVTcTxhgjycv+kTH1Vm51MUFSzjI+nh3OHDBh3R1g1oKPOpnQ\r\nKqJObxUzIDRO1qkehFttFWiM7ad1LvNiMg+/hsLbxjfv/WwAiG71A8GGz7oj\r\nt+pe4TDkf3rMbSzyDhJdPNsnh5i9sIwFkMGZgOZYPE0Numk7nOZ6H3VWNSYj\r\n6SfUeutnqLdfiIr2iH+r7D1aE9CqVW/JH5WI+jOHOr5Ee9iWh/YO59edRF8w\r\nSLsQh0PZVW1IzivyR+TUt2iEgJHQT4TQASMvzyPVmm9GO9gy9aJpUOlaqrRh\r\nVr3OC8dHj7P/A0lICjH0v7KELYy8lkE3UainCDdkjISRQzkG7UGGOmf4VhTG\r\nK4ZuRclRGD6NFyMqLW8UQ5CZF1T9wjlFr0YbFftLWGAqLddqJRyThkHOKwJG\r\nZvfy3uL6P8I28/o8ZKFs19rk10rxC0cwJUregO6QXeGDldgyfY8CMKjRhCqq\r\ntzrROtHpNqFBiftqN4PioJVLGMXyGPasLdjmTQrswc8rGSyj+A5lbstPdnze\r\nKv+TkcRajwpaLB/oCvjPRJ+vT0XO5oPulTs=\r\n=i9Ur\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1790-238.0_1652965074042_0.9852049148379565"},"_hasShrinkwrap":false},"1.0.0-canary-1778-239.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-239.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-239.0+67c3ebb","@bodiless/components":"1.0.0-canary-1778-239.0+67c3ebb","@bodiless/core":"1.0.0-canary-1778-239.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1778-239.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-239.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-OXh8BqEI0E7+K93Tc2R0bsHO4GqmXWEXyQq3uB3KkH/mF2gasRGvzFGD+NwSajZ5+XRN7PwUL9SHeMJKnzoNQw==","shasum":"8d23c5f8353adbb821f442420c3e4bc954d67b28","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-239.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwhfdzi5YoFThppDYylNJ8ZvrunBrdPK/+PE0Lcj73gAiEA7P1Sab62eRsu7B9Wfkv36565iIfKA17yB+/NJo4gJNo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihkH5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+8w/8CKvPhmftv7Y6ONwHTZDNDgN7gIKawkWqYkhkTzAqBdkkQEzk\r\nyDlCihyWY8CIWgqg2j/t0SCsdhIrqGusBDbnnIGlb7PhuJug1hVQh3NmZsn4\r\np/oE8wAfnFEeKFjcyjrcZoWskIbe4v0cSrnbGnabTepPIfb3Q/Hj6K1++3e/\r\n7dPUjy12YHjO99+HoY2sPJb/wEZX/UqkCQINfZ6INNuAi6XQc5oF62J3YLbe\r\nMRbcmJORsQMo0lfrWa/m0gvRUhs6ffe01mVz9PisLzCbxxCVcUFIJ2Tnho7K\r\no0dQTdiaBV3uKwM4fy178/Bs0Y9Io1hsYJRLsvEV69/N9DfxrDTdqGK9lGr0\r\nSafwTeX3WhHHWI/1MNGTBMXfqZ82ZTaWwz5MXuuNbKaKRovcKkfNUg+Z8ojp\r\nA9OXH7ZjCZwHWqZ+TxoHDnBjsj9Sch0J5zLhEOUV0gZLo3GWrKhJ2ZvtkgxO\r\nkpGy1ZBaxIla7HNWwUMBqASzfi61NUiHQ17rTQ8nnxEn1hcACcYw0+C3jPqo\r\nXx+mBksAF9iHMORLNPUX5YmPrFsK0jsVR89BUtQAgoF3uMfDh+radpJV3fDZ\r\nqr/r7GoWbhNegkQrS+AzLgK9KHqubIWDsGzMIDuRo89VVTmWh3dfBhvBNFd+\r\n9OAqvE1DQl6gwILmyiTIhVukEyxgC50sCXM=\r\n=0Hr8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-239.0_1652965880950_0.3456315570742923"},"_hasShrinkwrap":false},"1.0.0-canary-1795-241.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1795-241.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1795-241.0+67c3ebb","@bodiless/components":"1.0.0-canary-1795-241.0+67c3ebb","@bodiless/core":"1.0.0-canary-1795-241.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1795-241.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1795-241.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-tJn8Q/mjD8v2DWgLBa1B9NWc+RxlN+G4yvdM2AvPCtQUxy/saen+gFukeHmaG3LZGkmaSSt0DH7xUolykKLarQ==","shasum":"6bd1a0b99453b70226374fb07346d7939df2f3af","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1795-241.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID6fsCI1guSWx+oB/hRFj+Il4CF/K7xYr8Qg2c74J6x7AiEAxH3M55I3Ce6I4RpXwCh/2Vtk34SzxWxy930SEkBVWM0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihkQnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJPw//bwfAL9/Xn9WugSrMMXQIq8zaImBiX7DESeiOwJQdKpReFXCC\r\nZQvRDmp8h0rDeCHegEMxxQs6FY/pSylbDZNwOi4lMC8XwB+EZELvZS3YUfvC\r\nIvKWzPalVMbONBLirVwhnj+NgD9Mhw/ba2y+bBQ32nKR1Yw+unRo2RxNS3aR\r\nh1lgGUvFeKNLfkgIBxaor2GpGfhtccN29uECFwePGz86Hmvnsf6+/vh/nCHW\r\nl8xLzNuiNUyNN39uwwCqwWfrDdnnOLfRqrX+QpdG5qVOStV/QdI/RP3UBJvR\r\n9Vmb1e+s53+qd7CFafo/yIK3PHPABzapstgbQKoJo4x/oZr6J0PJ0+4WLJhX\r\nAV137oHVj/XBo8b5QpBpAnYJZEQWQNunQ9T/WmSDan05DBH3+fShbkNOgbC+\r\nALR4RSnlTxuwYnNmRcmRIXbicq/KqBsSI8Rp+liR2CNkQJvSHHAX8poNM3p3\r\nW1hmfZYwQoH47ADVYiljAuW2bP3KpxEH0FkIEhcRD/dQsEIst0ZY3fTpHWpH\r\nr7ZaClyyWCt34NqpMfTymnoV8wq+LOZj3Lb7NHvT/Jmxg91D4zmZFS1v0HVj\r\necSgkAokk+fiDVlGqjuumgtLrdKHJfE233XQxXfsiJzuKUBL82i1xEllmD4w\r\nxtTv+/mDRQ8WyRJjuSaf6519xrrPgU1XzrI=\r\n=I0/j\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1795-241.0_1652966439537_0.3033117979057247"},"_hasShrinkwrap":false},"1.0.0-canary-1795-240.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1795-240.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1795-240.0+67c3ebb","@bodiless/components":"1.0.0-canary-1795-240.0+67c3ebb","@bodiless/core":"1.0.0-canary-1795-240.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1795-240.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1795-240.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-/J5wwB5xWrSVJvxOM8SL7tlg6FV2YNXyifAWugm+BTEEv9WxFvKEc6O6WbXQz5mawsY5uVD/DvicovFLTxuF5w==","shasum":"599324cb1c0fa06665fe7216acb93d7176d6e3e5","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1795-240.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+6bcph+Asd1vud0E7ELxJXrPGazB+qSZF+LWarwnCywIgO9Ilte55ch925crUc3GvOG8ihDwba+23eRIigdK/kFw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihkRvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN6A/7BFiHHcoGlCjAg7fHtrDY7vwbkQMqrmLbZ2xu9H68gMYtuKG+\r\nVtxrcLkWuoSmkFKdDU/zo2VQCkbDiGEXeFl+5l/NsLvjRy3QXBZ9IVW0sWqM\r\nFdyjzBN0rE59e2gwvI5NPbhCb1KFWKYfvu8FwRp/oDkBjuLMajmKQq6V74hJ\r\nNaQMN1kaB1tm19lzDRcGJteQgh/2pdzfxwrYXCmgi+uNoGf65r8PlWoFqqut\r\n4wcbELnC85M3N+NogaVc0RbaxL0C9QUG8bN8TlRoIkkX8yPso2s5m3efsBrt\r\nCy7MBs2LxeEyw/1AOoPhrNwgVBh0fIW62XTjS3q2BcjYrNkJLXgppFOh1rTG\r\njwZsAWtktdFYbc2o44cF+oWY+OAx7imQHU4z9R+ZUCFn3gsiXaOepTe0bDzo\r\nBcw8KxVx5DjrG1AR99ELdrMbQiF6/621KGQTsyDihg5FoSotNX+CEpZJBJmI\r\nqVYu4e5uam2cEDAx6jiRnaJ0TdK91RupMhM+jbP/rYJiiU8fHFrXGkYhhbHP\r\nl3Cgf04tdT0dSWQ2hJwGpuTM7FHIQJA0Cb6X5YeYu4VnEbzy9ZnAZSHV6f6J\r\nnZOF7y73LaTuAETf+FQjwVvWm90sI/19A3kmkGERsmBhVWZhSXVa/HetfT6I\r\ncsDY5h4Nlh7JpAIXxa9aXUzanLKtPpJy4nk=\r\n=2f/2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1795-240.0_1652966511628_0.43101346968341914"},"_hasShrinkwrap":false},"1.0.0-canary-1790-242.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1790-242.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1790-242.0+67c3ebb","@bodiless/components":"1.0.0-canary-1790-242.0+67c3ebb","@bodiless/core":"1.0.0-canary-1790-242.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1790-242.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1790-242.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-TD/WeCwu006wsO/uZCsFfDkT44FOQ0cZuUhAZwHqmV/iD6p55kYz1Wbk++F13A/AEqyzWYzuX/qdyJ/POi/T5w==","shasum":"12c391d6c2d9787625a46b3bb85acad8ffc8a3cc","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1790-242.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA4w/WGGJtKLbIVriUEga56wMmdOIGz7OoYL76i9YBrAAiEAun8ci9jyH2TFREmUnyXH+OS4HuIrpZp7iEbHNyYA5Vs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihkX1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhDg//QydacFv3A+DE4ujdcwMhpQEZNycjLVyONWdiQBbxowoX/EW3\r\nsOoSPlI5OReUnZBSQnUtOBp0IwlPhVpciE0sQL3zK58lllGpTJCAWEOXnlgZ\r\nXJ6fuxeCUexmewo6DNP4760Tc1q/mg8P73lH6HEoYljd2IYrDYSSL/S0SwJk\r\nYQiyeDXCY7jKIfs7HNhN6d7z3YeKECGCr/vb4W1VlOYzGH123zSuntYl1SXO\r\nyCKk4Leyn1JDmHymyTCJdFHZYKiX0ZeILiT9A6beuZP7FZb/1UTfnFbM5ITp\r\nyEe9+L4pmXcuRyf1EK9cHZx6pLKcVA0Bqn4Jit8XLPvvkuBJR+CssAXHXAQS\r\nQmz2rDgcZBFSAHiOLnPlAARY9YRp8lbfEUKsIJflckjJn8lPpzXU52V+jHkb\r\nbJiStyyYhBbowRqymW1HJri9Bnv4A1/w5g46EBxv8fjvW4XDQbejlMg5pIg3\r\nDcCdBM2R70mliWVqWsxmrKVZZyqw8+2AL4ugA8lKZLJpJCSnkBViV9T9yLSy\r\n4gcUUW1PykBOr0+kxYeZSiaSNLb/rkoGKySVovCri51/fhqXSDSTlq27tG57\r\nuAZxerkvb4W4gt1/It0d75Q9UWtETjT2wPeNcwEXu006pXdv5CCUOdto+68R\r\nCckobdYOkHHaFL6L9iagA5Z1lrxQCDYSyJE=\r\n=qnYN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1790-242.0_1652966901319_0.687489013132329"},"_hasShrinkwrap":false},"1.0.0-canary-1771-243.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1771-243.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1771-243.0+67c3ebb","@bodiless/components":"1.0.0-canary-1771-243.0+67c3ebb","@bodiless/core":"1.0.0-canary-1771-243.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1771-243.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1771-243.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pFJT+MMh/gJrwulynT2OpRmp+0UIUw0HDAeePdxCy4KqqV/pOowL8vMsfmyaFRo7LlYxLoW4LfrgxwXwQqMyZw==","shasum":"81257d707b82c26d7b00305c5ced52359ca969aa","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1771-243.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqiKs+AMil8LEpRAJbQDi1yubHlkmIACeelzv+fZlXXAiA4+RuoQq8z3f/uY/FVEhpxfC9SomzhmQqfu5dVXOOUbg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihmwCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo55g/+Je7BwML8pV6Bx6I7i23hxbq7Ue1Jyfej6AYvrDfIPLrVtfqZ\r\nYXcFaYMF55TkdCvkYf2LaYDJzqGUHwSqSJzoUky4q6uGcYePQM+FQeO9+JNT\r\ngudajlU2gBbxOIRjG6e66/Z+GWkY4s4NgN4yEGO5a+miqVNuLk8TAwOxxU/m\r\nJmg9/Eibg8WnlFfwliDFfLSOTGhOK0wXKsn3rfQqjllGDjslh9x7kamP9Sa/\r\nfj/UvrNXHvtvsdQ4HUHR4C0mjlC8JzjWvgINAXYhjJwvwcpNXtSO0ptHxGD/\r\n4yTQJ4ehERvf/k0DsoVVWra3MG62KdF2tFwQsRg3DrKVzH4xbUROv1Fokz+W\r\nTrXUUPN3HGEcEE4NGX+j/Y/uGIqRoPAYQ2unk6Xj1rCsFrpqWvNZhLDaS1Aw\r\nQeD32TjmmkuwtmezOmCVfRZsBMQntQneOZ5sJzEI2kqnPLFck8KutiSsDixQ\r\n7txJ4ot7T2xdCzKmJsEbmWy4kWMOapUK7nS+GZ9Va0mm0atlypQ5mYeT6NlA\r\nLgBJ6ZT6asFfJPG/rscykAlxnpT7ZPBTMeYfFwNjEojxc32bhifvBicR//lu\r\nPhnus/X9vnL1AynYfPb0NkbHRx2dfzxslBHDp1nnABnavTMWMU6LSaptcP8d\r\ne68ISUn421eQzG6tVcEDHNPXw/l5Ocs+xTs=\r\n=ZcgE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1771-243.0_1652976642407_0.27827137280625824"},"_hasShrinkwrap":false},"1.0.0-canary-1683-244.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1683-244.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1683-244.0+67c3ebb","@bodiless/components":"1.0.0-canary-1683-244.0+67c3ebb","@bodiless/core":"1.0.0-canary-1683-244.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1683-244.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1683-244.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-hztcHDSYSkyJ1YlzfHeNo0FOSl7rEnWmq7YxvwgphIB6B/vjiVRqm2bllOUdzen3aDX5LC5stReQQqXBBtf2Ew==","shasum":"5c081182c6c99f7194b95594a76bf4bf8cf1e447","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1683-244.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJKVz96HDvcBSrJnySjFabkYSDEEh31fg4khDSdBNTiQIgP+1mWKRwfFi6Oc3nvdWRv9n1VsMvN2411Jw189OLCtQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihnC7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzAg/+KBMDJNVAc6FR+45SavVh9eQiY5VZgpishNPipTP7k5a76oVK\r\nOvxgYn2CZrfmazGRetRQAo42WRRicomP7c89h2aARjdLIpKP5wzYrtIElWUk\r\nkRr/iSgBd+1eSTiWevrl/1xSQ36hZVibRKUDXgR9QT58Yniu23Bcna0HphU+\r\n/LLrW2dQcDPgtQNI4U18pBKaxQESTlSiIpwUC15c1MaYJwT0ZaLfKNygJ8/k\r\nnrgiI8U1u/QJ5/FtXiosazEnEMXEXuA4DpcBxHKyIvv/hwMMILv7q+4qK2W5\r\nhgoauah8eqRNF99iXtic07CMmAcjDftTsmWfAFmxaFwSfwYKNcRr4843lJ4B\r\nMSkrwjQEntqpo8cwddWc7lru29J+QdsX/8TGSki6Fkv+gYFcgXgPxRyUHpVR\r\nCXzbCFliWm/T4sFjzV4MtNiVpcUUO7VB9xXJhZMO1ld+9HkGcwbKT2taAOUs\r\neE+GAp0zkdboZajb0VZMR357yZOxQsZDJLaOjuU601MpSrjM1OpDg4ATQkUy\r\n/h6N1HoC45iL8XvWjD6JOMsVUdJubz/x97IWvjei9hBv7TPKJ3/WslixZDxN\r\nlQMocxKnEctpki5hTCJQlYwFgmyr8ZvTV8aB6TnbGSlb7c9DLTkwxjlppV63\r\nvhgNvvZAFfsWC2dda36C2V/rouUiWeUKHOY=\r\n=M1X5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1683-244.0_1652977851497_0.6184882666271903"},"_hasShrinkwrap":false},"1.0.0-canary-1785-245.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-245.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-245.0+67c3ebb","@bodiless/components":"1.0.0-canary-1785-245.0+67c3ebb","@bodiless/core":"1.0.0-canary-1785-245.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1785-245.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-245.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-8/8bsUMvVOhBqgKgcuLtacQA/RSSnOHYBfkqyFt+l3wN23ISJkhAjsMQyeHCfpCj6w+0KrYdWMUla53x4iutXw==","shasum":"08e8751b83685aef927aa823481df81770b2b1d1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-245.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCxWKDvGyycwS1KzkPf+UtcGe38qrZKjTXMxHDrL8afAIhANnTfCl6NX/V/foGhmWcWlVl79ToqWxezxN5wYaSd4Pn"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihpu8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoorQ/9FpYobJp5gSTKgP92i9ce7OTth+aEQTfNUqjokjdLWxzVgoHA\r\nWw1zko/A/WHanTV8ELMXuOHXruIQRCJMOpQtF7c9IJL4EmBOGoOrx5uT8sej\r\ntNbdDksctbEwkGQMDoKaXbO3TVTvfmLh3i045HZdaUAUHzfkJsbQI0qNG1pR\r\nxYzevtvKOx6tGoU/q0CP+neTY3/CHXcjjsUTKkmElXpThyse5Kbgw9dfas3J\r\npfCWAA1ZX3GjT4FFczEGesJujBexCXdDBBMaaqOsOadVXA5a0FdwXwGjn/5A\r\nl6i/gwSkWN42ofpNyDYm+kPibpXSbeZUsxWNf7Ve7uXTzqrW1z6IhmXngFfB\r\n0hUa/+Zp8ClB2fp6Y6I+1w35ksLTxB97rp+iIoO1WaeVH7olHEJgU0upxVmY\r\n4CHCaBGGvBDhGpxZeUWjw7fEtVeIdXJTxEXc4oQHlflJb18HYM6oH87YuHbh\r\nEB/Xif9iaasjJyQD7sufD8rmlMc9BwQBsjz7VD4dXtvytdAgNrtFhlnPYFLL\r\n/5qLwgfKeMZbo2dVXzV87yoPS22CvV6AWJqvQZRi6Bwql/xVSDV14aQbTthA\r\nAXJF9b4ccIahXS0DWzLblueTvPTBfqZLySuvkZSRPUa5Db8peqjX+RVBqyfd\r\nU5NmhWfij+AxHrYqbWI/YiwWpMQt15//ubM=\r\n=RIoO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-245.0_1652988859957_0.15893160858685973"},"_hasShrinkwrap":false},"1.0.0-canary-1790-246.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1790-246.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1790-246.0+67c3ebb","@bodiless/components":"1.0.0-canary-1790-246.0+67c3ebb","@bodiless/core":"1.0.0-canary-1790-246.0+67c3ebb","@bodiless/fclasses":"1.0.0-canary-1790-246.0+67c3ebb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"67c3ebbd71585052e1b9fd3160fabae140b28ebc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1790-246.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4qUbfjKHvYBbXhhwCMztCf4h0QrNu8tGYmpbDVSb9mpgyZ8nYcM6dE3Rk8RZsEjx7iKrHZYrOjIALMdLxODmWw==","shasum":"da6625f48a3fdc8e2c76ab30faca8b3fed055d60","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1790-246.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPf5FzYK2/PlI73C3jlHGBkEkW6zJgS8YBYHKQZV4/3AiARD9EEDtRIlGAL+KsYcs7OFQrc4UWBq0RFDzNuNq6sJg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihpx9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBiw//eQVPLe4SQxepyd+5jYOxyohYc1ACCzM2RD/X3dTMzYJgjSAG\r\ngka0kF6WYto2pWqJCVswFWIXOTOyW7EsdBQ6D8Lzj3HNUieD2u0uln5lSAiN\r\nI/EdIqbrBbsqg+235K9/4OUDkV46hGFjjA/zX+zto5yIivms8YDorfTzajHi\r\nf6skY8EKgSoiVCfNxt5kY9hR6VFGzGwxCG/KiXgVBeIUSO0ivLlJrpO+OucH\r\nKb28epPf6YYX861iLpnwE45W4SLUAp2UbsEOzr4g193kEi2/n2JOVhYrbA1f\r\nireHyVSDX9cGlzDeKG+8i3lSgIhy4StEzA3eXUs5Jv3MjAH4e0MUPyB7i7Eo\r\nrl+jgPdFJylZkr5wTE0ZyHRuqaaksljlgPDOaGKG2LORiNlVEKmjmVAd5X3I\r\nr+8AwmsrR/6EWQsbEGdRrCoVI4Ggagyn/HBM6xORgIvBqHCVjq3mrfwPQgts\r\nzCtvrdYtfrRuKX3/W3+qw88oGWDQIEjEu6SJKy2rLzO6NBh/of1yBRta6QBb\r\nNVCgZM5R8Gh0o18ZYsZxXZyh6Cx/AZUE+t/7dS87x6/LUwRwdFO/Hvgm+q02\r\noNBolcrzDmbkfpI1T4+naC/vK5FNS5j85UexBikWALvjcYb1ITMwmmxs298A\r\nol3HhdKX4ZhnKBRVKr0yyObAnuGnSIFhkO4=\r\n=zRme\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1790-246.0_1652989052862_0.004478920847460044"},"_hasShrinkwrap":false},"1.0.0-canary-1785-248.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-248.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-248.0+209e84c","@bodiless/components":"1.0.0-canary-1785-248.0+209e84c","@bodiless/core":"1.0.0-canary-1785-248.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1785-248.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-248.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-buuJjtJCMaFy7m8kbPUnP9w8p9PgHaZCQO0VSB4dUpb/XINN+vPi4cLsoX9M5b0pmmqQrdQxXjkZdgQvzVSCOw==","shasum":"4916518e34723de9a69e1f9508c2fabe144c2afd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-248.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC65HedZxW7A1n76Nt4wHfQL1jBTwV2l3ahkFZ+j+N4NwIhAJKAIG9HGDRDbswAAm1Y0yl0vOzBKHvgEXwXmVUKHjM8"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihp76ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7KQ//X6MhMxaNznbgCggIv173JuiAitTAPduGBbnFaJrpoIY78vML\r\nPrqLKK4u33Ff4INpCN1xy8+K9GXeCHYf1qXGWKdVDxTgXcA5wRLfali246sU\r\nm6Dv2DoSiBbF89ufDWH7+pnELRHrg9hGC8zO2+qMNNEFBxabcAxAhquWxr4l\r\n/cHalU4vM6oYFv86W5iYmO/FFfyWchrR7Q0bONmUafm0KB8OO7K9yC60MwBy\r\nPyjqs7oEXYoMIJ9OwT2nwtVdhlx9eZFbyy8hbUydRozgy+Sp4GYh4I4lFz4o\r\nQ6ewmcX43S3hoXz7BC0O3Cbl24C01QzRVPt3vN577SWGLLUtcXNkcnvtlPgW\r\ng2DNisWQU9/36WCPDYTF8RsEChvC5Ay7KnTN+HABIaW9X4pnJdo1uVqzzjjd\r\nILgg4jlMbuxzXtewz91AtmblNmLk2+fk4WoFpbjoyM7ZAE+xr8oyd6Y+Ec7I\r\nXRmSKoOpm9tXYW8nwsUV3iICYVCcPusIAbKuvJDl/EX0BgQ9fynJ9fZicP9l\r\n9uiu34hdB8P98BL1GmIHo5+InQ1qY6Lo44eXPeS1qKzsD/Vp0MmUHIeZRlGS\r\nk5OurdjYhi5XeNYujwHRJU6Mr0WROf+oeaR/1H7kGvFoUHfnxRs/7tYbiBnU\r\nsXOu54GMDo0E+9E9NvMrVnJXWZJ0EeGWCVc=\r\n=awxH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-248.0_1652989690328_0.5395897188306567"},"_hasShrinkwrap":false},"1.0.0-canary-1790-247.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1790-247.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1790-247.0+209e84c","@bodiless/components":"1.0.0-canary-1790-247.0+209e84c","@bodiless/core":"1.0.0-canary-1790-247.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1790-247.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1790-247.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-XRIf0JQx++J3VFcnty0YyUmiK/poY4UyZQCagVePSVNIfajsrhZ0MfofuRHwYk1ghsFQKHNP79Kt2LI3/yi25A==","shasum":"bee6cbb96b555bbbecf5997b55c764dc1139aa75","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1790-247.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHzJUNUTyB5scSjS62xC0yzY7YFinPhzxw+vghhlR4gwIhAMICPV0PK/mSuLlRVCODGJ6jv9L7cQijFK9wzLYW74mf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihp87ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZzxAApLi5pqlNopCkR7Ee0NB4Ax+FDVd+v309neigjjVlupyMpDvn\r\ncinSe9inyisn0diuqJGaPcHvs5FdJQWxSeNXlJIZHjstisL9GbMFjXpiATdU\r\nrP90jNAPPsyJn6EZY2q2Ob5cFecqQTBr13Q6HVzfrp+gm5W4vfPSKNYzO4y8\r\n5BW6Z46wNT2sDaTRhpM4od9B94xMFm/HyyEjk/JcNce1W7lSzXiR6Zse0PMU\r\nNe6CwfQD/95e9dD9nD5xVwG5P0WTfU3HNfCo+RN5wDT0lrYgpwr1cN61/wVM\r\nx/z7Y6au/4XSYl+CgRMI8L5S3dGeTQTSPLx7vsEeQ5rZqPxIsQ1a1SDaEBKZ\r\nD+I4Yp093BrxbHEao4eKgQ1EvdmO11V6y4Nlo8TLrcIa8A2UQzSESecCVlDp\r\nXar/ICN4vRLFqzxMFECrUI5FLnKkxGEiR86qK4CzT0TBiih8HqNhdbgDEZIB\r\nDD6Ob/kFIKYSvYc2kup54EG1PXooMqACKlkZdmMr2TuRhZvxl7I0sJ1UTBde\r\nPU08hNXcS+osyg0PShnZHpLDx+zij5uVZm7pvT2G//zz98DjGQn8LxM+76jn\r\np0WiLvMKX4xTniOTRj5dvYEl+WPJ4MI7dujzRDn6tA+esjEhfjQf0q+LTm9m\r\ne4GlH7RC1lSOlyFjzOkFXQSpEVbBaQ8C72Q=\r\n=RjCk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1790-247.0_1652989755590_0.8347174293068143"},"_hasShrinkwrap":false},"1.0.0-canary-1628-249.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-249.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-249.0+209e84c","@bodiless/components":"1.0.0-canary-1628-249.0+209e84c","@bodiless/core":"1.0.0-canary-1628-249.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1628-249.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-249.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-WJL4f8WEAObmqb18Mw8YyoVTbn5zlcg5aR3Mt+I50U9fo1jdm5Rs114OlRNqk1eC/UYEF5kzQ+GERI6/jsZ95Q==","shasum":"1890a34b4d91687e92dd2d0b807aedd01f1db213","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-249.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFUI+Bb+GpzcjZz6eCf0tehpZMuKKlgcrcQeMO4tprRgAiEA2gMwhFi8PPXInkbZ1W3cLX8XAn6BjVgg6LA0iSX7MX4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihqTdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSoA//bPTgjoVG7l966TdnsPhZTVaE33fxg9kg2g8zAy3w1uVb9Vqx\r\n0d7nFgL7sBmw+ELja7ztR5Qk1Yx6kT4DBT2+LSXyimsGSML6Kv+U5WmfPSPm\r\nEzd1cestYi1bFZP1Vd+hINnK98KSSMm22P6N3j3CNbFZGWT+tVonmsAOEr2x\r\nfWYSZCIF5BsI7glhzBb0X9wLTcUW+4P6y/fhJowUfGN5zAsV8jI1oB6kTBtG\r\nqB4WbdwY0vryRbkIZS0XvMIIP0xo5r4eDQusLevMnw2ruquEPqph3UCSptgj\r\nLMafT693ErCaRE1rBoLR7ZeprHLdit4+a+S1saHGJdcSd1LVk00vTiNQedaH\r\noarza/abkwqDAi0AG20XpFdoZ1mClVRbR5WVePult9uLGyUtJx2olQFAxQ5i\r\n1LYcPIE/SRzUBoLe3ehUtlSuDqxLYcDBLYdhBrNPYQ6/D9D8FI9sLaKx2Nex\r\nhRqaQT04jpzYPrkRYYJBXp0j3yh54I2ct87o/ozudXqRbdKR3kkGX9fGMItT\r\nJQ1D9tFU5nGkMrpkKuXbjzQUddQrZ5k392BTJsPdRiFUKTzQI798wHsoYZc4\r\nBrx8ePpS/ANhEfDirdwKtA7+jCD8OeipSKngN6qwEgIXhix/dI9QVYpOtjIX\r\nKYPuADoI67BrY2ichyU2aDgwBiOfLGl+D2Y=\r\n=GZgO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-249.0_1652991197005_0.1797970321526423"},"_hasShrinkwrap":false},"1.0.0-canary-1792-250.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1792-250.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1792-250.0+209e84c","@bodiless/components":"1.0.0-canary-1792-250.0+209e84c","@bodiless/core":"1.0.0-canary-1792-250.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1792-250.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1792-250.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4zuVEkv7GmghLQ11MkRr72m6+K5MoyJNscYZhl6IWEACkwOc1TiY6kzQXA5PH2cB00s+PIcsjVevNnrioHSEqA==","shasum":"d93ad7b972ea2ee939d4bbe16b8ddb7d4c592657","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1792-250.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHO2HyA6k7PjhBecbxhw8CMaXYg7E5JWLihRkn3Sry/3AiA4wqEDT6Op1mKqYs3IbnDQ/Y93RlIuVhGZ4XR4CiWbKg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihqm4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpstQ//fGMg165N7AmQ4SEo1rIExBubXDslPc4QAGehx5UM2dumoZCn\r\nRb4J+KezTLFxFzRPDaKzEVdhbV7qO89ObqdSFCpIC+LDRx20JA9fLhhJQWAY\r\nDQg0OFyLdd+plpFsXSluDXl08NLSdH8BqIcAdPm/Q1lC5dzlbh15xanO4J0i\r\n6Zh4D1O5aWiybz8qY+0dl+GIJueqHTa8olQVYF8yYP9mwTu9avujI/zuDr5H\r\nHysnP6dFl2SlSJK0+6hIzhxUdZpNzaLeQGETMKUZCQp0rnxqsDzKsJOZZxlG\r\nG4J1c6VmGDLa352C/dejTmJbWCgu0eyDRNmGUJTbN1iJv1hFYGqYjqm65JbD\r\nXZeHjsvL2/JRk9zxSp2cuMtzeCZRN8nexMy8OVbVggBizYfoObtGqP7fEYrv\r\n2Zi8lKlB+LQadw3pbn/KhnyWX0fm/WOSm1JlAXVMfSa6utGOyp2TnVMe08HC\r\nJsUMBR5xytEmE7UQaA7DIrxg1U7BiNXQFlgBu4vLjdePnzQgMEIO/QQ3wK8w\r\nG12qKrKtnAL67vWJbBGKn61M68Gjjwfi54dHVJIK1dY0ucs9KsF+lUmA9jVK\r\nt07YdYYqpbCS+zw6ardlDFnyaKdiNmMYq2btTiRCuMFlN3DRahJtI+2Qn1hK\r\nz2x6sAD4VBwthO0VGIyOsRqx1rjXCnHNItw=\r\n=T/oh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1792-250.0_1652992440548_0.8488795218587986"},"_hasShrinkwrap":false},"1.0.0-canary-1792-251.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1792-251.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1792-251.0+209e84c","@bodiless/components":"1.0.0-canary-1792-251.0+209e84c","@bodiless/core":"1.0.0-canary-1792-251.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1792-251.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1792-251.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Gdy8W83n/PrsErQUwXY1myfwj7Ihvec/v1sIcX0IavPMueAlilyiFr0Qhs7jmfoaqo7Mk3oR4Wl3hDS8mwUhEA==","shasum":"99b9f2350bedb1fbf20acf1b69d13bfc8f2fbf8c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1792-251.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwss/8yJTGjdkHXQ7KgkR7qLI89sXwiJAufveyqqGU+wIgInmeOvppnliRiGVyM48AJ7/eJFI3PxjjvCZKWISrDc4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihq1WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpfdw/8DXs4AMTO77mpo19NNAiOy+e8jtJiKCcJYqkwsbVjVb84Wk4o\r\naU6woMhCLIpsHRLToij8rOMqQPYm8GyYuTVS1xJ7p7iuQg7393Rg6c3+ZGD+\r\n7JzlKZhafIaCmqEq17sERHFTS1C2IKNnP8qM/xABJ+wZhhcLWZvUCFtMZmow\r\nglmGqyvHCWFzCJuakRqv8CayyBGsaWU3i7yqcchXD9pSnRV64Mfj6QHUizyJ\r\nuedUOfELjWxG862Q1GyMygOIGW0HVvl6xIolkjxSNnsMKoHACcF0Id5ChrPn\r\nW1OVJkfOZk3G/4m+hdNaXrmokW2xdn3vYyTP8dqNCWK/L8LNeYoeOcN+DVMf\r\nolvguy8elT6y54/Zt59/ziruE783I4uqRuF0o3vjZ2jeePWk05MoJfyCE2/u\r\n6Cd21APmHoOjCqFoF0IZ/0O+XOzv+fZ0OH5F3bQkwRRoWnF1pnsd2b+XyjMg\r\nkvWT5+y9VTQBeouDJecyQsDUvIJ1ejtTur72wgXbTRa84mEadAJy8l/kxgBZ\r\n9nmQ+FQZt3mGPhKlVRbfjEtbrQaL3UEmXXfdfWYXkxKElTjImgChVniCK19O\r\nRLTbK+EesHuGuQS2dFxBXxSnN3ivYef/xtK2G60v2K/lp2Jn0idCC+zY+7lO\r\ndaKkrfn3tBSK9/O3AyiTnRPUKkGwPJjYGAg=\r\n=E7Y8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1792-251.0_1652993365935_0.0738599109862581"},"_hasShrinkwrap":false},"1.0.0-canary-1787-252.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-252.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-252.0+209e84c","@bodiless/components":"1.0.0-canary-1787-252.0+209e84c","@bodiless/core":"1.0.0-canary-1787-252.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1787-252.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-252.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xt/PsS4+MPQZltu3yv2AKWKKxnAIIouZY4LAYjef9q9tu+szovpDlaYlA7xKZQxubZF1yfY2QcpKzbtBvZnsyA==","shasum":"97c6c14ab3c86a1a61b0ab93b6766365ed5bb05e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-252.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIgiGuzV5LxtMjIjtUW75Ewa9LRcLWZjqYkynSQW8K2QIgWWje8Vz93EraSg+RGMGeNmE//q2UKs7mMg1tipfu2PI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihsxLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoanw/+IMwesExo1mUdIhXZyMCchbpzQvei44hUhynappMouw42ahJG\r\nEPsIVepwmWkaOMp36pykOwxR5eKayHLqHp23zGBGenUf0eN/oAze2kgLPGxE\r\njNX62Lm1jdSVTHz77XX+kCoPHyJKDdifgUa2H+4Jgbll+63M+0wKCHmjLGRU\r\nCHJz1JLxS1fcucam2YTTl/3QYohaFzrOJINzb5V8bisKIZp0qWgFZh6w4pW1\r\nc4D1gi3GfnAnIpjPHcSD6piEpGO4WtoQexa+KMnwKIxSq0EGZ/9XMjQp6Z3a\r\ndNnYQ3jz6GBzCqnStS34+Iw12X0MMDVOiF7MFMpI+7PPgW2zoU+/i0cTitMy\r\nUE8TQFaUHnnxMGEIOcfA3EGf2o7Z5bDkKr1moCO0YsSkZw8lsIfxIekavbHN\r\n2Vwu4qgTfHGDdfBiDnsHcgPZa+der5Prn77xZPg0kz6Usx3hoGUQgRKRnb5f\r\nDvE1iYEJ350ND3eb31lgh3oDFHuWpJP3lnM7oEIxzkDDbPUiOCjqhD33vwln\r\nhMzTeZM3k2BwmZ/J8Pf+wHynbsf/WHwAO+YyAdYTINgdubl12nXPe8L0OSeG\r\nROLVMdkwDs+K96lkMfW5Zv+SuREl4HryI34VdDWpQJt9UrOyMnoRta3Hw5Jc\r\nvZNWWGZeFKzrUNkI62uX/IXVZvo6QHWWP68=\r\n=fdFe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-252.0_1653001290731_0.3309247307033234"},"_hasShrinkwrap":false},"1.0.0-canary-1787-253.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-253.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-253.0+209e84c","@bodiless/components":"1.0.0-canary-1787-253.0+209e84c","@bodiless/core":"1.0.0-canary-1787-253.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1787-253.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-253.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-C8XlHphN/f7FsZoaUJfwAjXQQMusZJrx7xXmu/NJ510ev0nH9qcclmL8MrMLqqUcK97+sTZTUOtY1MJn4Za7lQ==","shasum":"32b97b6ef8744308df5c6ae6e2cfcb0c051f1923","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-253.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMBU+Nkf1uV6N0p+In951eeAwyw6gRI7K9fxCPlkNqlAIhAN5MMySP6vZWWs9bSgrM0zTc4mIP8j9o19tCouwExpDg"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihs0ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohjA/5AEDYcXKfsBiyy/YSEAS/rgE+a+07bSIPn+xX5ObbNZcBwCkG\r\niXHjyruwVyPnQAIloNBD4VICagEzkRi3rlCgLGM2MLSjKDffRmLstuBAegga\r\n0smcLM0H9OoEG/VR2cSq9T0SC6DQIAMfuqhSd8JEuKwd779/PFjKUitrFxt9\r\nVkS2Stvd40vasfzp28DC3LJSx0mvz/xzFsRNrBf5JeWCbIRtD7pR3FuWESGE\r\naKR/TkvYJezj+F7xEISic8bVEdByo/MeVchgwWLILBtKXXsK2fYkPfRxpeoD\r\nKSNG/Q+MQNz5CwvPyWAOhLKbN3u1yjhYoQ3UpFRMn+INCXb8x97yfbeSxFs/\r\nn+poix7NI8inD00Pd1jXT3/oI+VUkemuaRIqRksRLrZu0btLfMPsFB1Fa7jz\r\njgV/iP0mgEwsyc6mS/xpSPzZLvg8+RM2IVB864j9eEL5qiiqWYEBcyUnIAv6\r\nJx/Ysoh8c8Fq1nzYHRbAGZZDcWbaSC3SE46u8lIzC0/ByCmfOznSnFbfcRPb\r\njuMHXyGHgAJRyEWIZjx7uNyzheCzxl2QvobVoF8q8zIBfyj64Cn017p4C8Zs\r\n4GSlU1Znci2tkGtZvTGPgJlZqb/+6/swuoK/KoTBkG8oHsuYl9OqQbeg2TFZ\r\nAAm+SwrcwNnihe3QbxQx6ijHEmn+4cGAFXM=\r\n=CD0X\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-253.0_1653001496859_0.9205361205206914"},"_hasShrinkwrap":false},"1.0.0-canary-1487-254.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-254.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-254.0+209e84c","@bodiless/components":"1.0.0-canary-1487-254.0+209e84c","@bodiless/core":"1.0.0-canary-1487-254.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1487-254.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-254.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ekvFn3BqPg22+qf3TBtI+QJh05hKg8MQZQv+aaJuX/fdKCeH3ENw9FxFNKtCLWQqosB0jPJRm28V7yrMvyInGA==","shasum":"c32bbf6cfd0fe5291112e0e7812f50cfd8e7efaa","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-254.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWRGSUqjHUKLyz/pY/1IWIQojXW0pRpeiNBl3WNLXLHgIhAM5QGIK7cg2yNbK6E7q2RBwtx6gGRyQKQRwvD8+l5tOi"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih088ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr82g/+O3sV9tujK3bSndrhb9jVFIMtU6MsMLX6Dhc62YNoRBOTl1Y0\r\neYUW5ejaJjc4aSiLAaFD+Gjzv/1dW5cYkffL0z/ufB0PYxRt2u7U38OoG4N2\r\nVChJs3IqWbb59o4J9H1bToPjfd2bL7t2M2sw3Obt1QXcc5GLDt5Yc/tjSZdX\r\nCA593odyMpp2OvqmUvHVBU1jWNmyP0g2RdKHH2Oy9sjjGbEycJQdgHigH8oc\r\nYAAYXA+V5jIisqFAA73c2FncdPj5Q2S3X9uvb46zSPhKI0Cxasc4+BhB8/FY\r\n/7qqEysPN/DEK/XqAbB02D76gkpZ3n1bqjA+ZZ3ercFXM6LzNB6LcPFBQ7NA\r\nmIIEBbAMUDvqyd/3C2p7nK8k01eBbK3HMcPkdXfp82RrG+t+ouBp6fKvQ8IX\r\n0zW3pUPcowsr8GToyIbiIsIJL1HDg6x8ZpsiuLwVQ+6kfr8eHPrrssz2MIi3\r\nEj5se97rP3HFdsVPJBppGVPPN/a4wS7A75EUvzdKYccAAEO63r/T+KjAIncJ\r\nlCITjSXZLMcw/jmrBD+KPdFroRt8amH9k4cJm55QuJ4DcN7KrQ6SLqCVyNSD\r\nJ5kNtXttyElIGOuTLU7TLwmGT/lxvG0BuTFUfR05lCNwJGZMDoE29jssjaYM\r\nlg0d2kqZ6G192QYojIZZFATADa14BM2fA5M=\r\n=CYQG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-254.0_1653034812472_0.21709092956191678"},"_hasShrinkwrap":false},"1.0.0-canary-1487-255.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-255.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-255.0+209e84c","@bodiless/components":"1.0.0-canary-1487-255.0+209e84c","@bodiless/core":"1.0.0-canary-1487-255.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1487-255.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-255.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-8MBdbJumzW9EgZ05ZSAH/lUqyq7wHdcxt1cQYsYUmkl8cjyENKs6bCKGiIh3J395O4gswEqX+tEbw2oBAoHenw==","shasum":"b3508cc6b021cb5c038f7a86974669e2d0fa6705","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-255.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQfWxVBrFeGcK3V2LMH5Zj4EhEC/1uVptObVmOuIa9kAiACLoQw4kQ4udHTAcdkmKfFc8qMkW7RXMOe2hDQu3hBaw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih1Q0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAzA//Q31TouoAE1Lygzsxf8LkMtShpB6Z1V/HMBZS2cxLYkMrRGbK\r\n+Nws4kon9FlmKPh/jQdSzmPvg5aGa5NOtw9QYCPFWsJlJ8C/9Mn1EFXajzG9\r\nWyURpnPWfQnloEm7EQ/Fxt3Z5Mfg8JV7rOz9blx8vm5NKKbG6EbDZLQRQjyM\r\naKrvBzHFK5XvJuOn3iEqn4HXzdqOfoQgXJmydoq3GsVFSv2NbctXmo2eUvDB\r\ngmSTHcGDPKYx3CnZptD6atNtjApb5Ofh+MPUAZNDNdQMh9u70i62h1gmix9A\r\nSh1FjqatOBb51+6cPjNnUVxTcZJ5+aOSenw/YHtZ33aMKBe+u1mooaCRtOmZ\r\nHSzLpdw6L4yXUu+xGQ6s3sxUclFhP6Amo0erSi6ius2hG5n5D57e7vMFQTPG\r\n6B7ffkH+3mwQtc+aqJ2w5y9ZKYWfDS/Eny6cwc20sS3f7b2Or53Bte8GnXpF\r\n313H8lu6bC7bqQ0P/HT7c80aR2zNX0LdGWGAkNlRqr3a3mUVb49/7oH+/1dc\r\nQjgy5jxAxI8RrOa3Oy7/lipri4i90LW5VfrBmmPFAJ+L3clxpl5PqI13Wd+H\r\nK6eMan0VcYmSS4vAWUiGEJXQvNhzEbCfucbo0J1FrqiOTDMG/bqrQasV/iR4\r\nyZk+pD4v+oeKe3ctzFFIta5kG85dqY0zsxo=\r\n=LJjF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-255.0_1653036084027_0.6707409136297819"},"_hasShrinkwrap":false},"1.0.0-canary-1628-256.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1628-256.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1628-256.0+209e84c","@bodiless/components":"1.0.0-canary-1628-256.0+209e84c","@bodiless/core":"1.0.0-canary-1628-256.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1628-256.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1628-256.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-9n3+HjFDPq952kwpzRAKCeKWvX9vFyHFAgFBzZPMr5iajzlXf9eRkgyGfNvy+7z/0nW9QdOnJNVx+NkBYf1HKw==","shasum":"99b025433579311059debd769eeac61545ed9120","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1628-256.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhe70eSFZvXC388y1RsC3UcmNFDL2vpEiGZ/9EZ7QpugIhAJ2VFO0gsgx0PLr0MUuMG2Jinxucq4auKx+VmZ5NM1qf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih4rpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp45g//ZkaNpOsWzv+BNM1q82PRUN/T0S5P/MuQY7BUfgdPcQbOOBzY\r\nwdSMzuIypF39AP+yG1BuObuE4bQ7zZij5yEyk0YPwQaf8z1EX3Zie0rFeJ6K\r\n8coYVbvGNDGX+/0lR5l89wDNFzMkMuC9IVrwC2nEwjgEQTOoNN9RLq7/r7X9\r\n7A/u014Iza6Q6q4L0vaXYs0JT0fHQIrT2oHYv9An/529Jdqu/xKNlk1mPElh\r\n0hCs7EN+c427CnZ7RFZGFeNVFJGQVk6A/LNGdZXH5cH9Kqm0DAY2hzScoxk7\r\n5NtXFnx/9ahXOsA6ZPY4MkWLwnWAslxENquy+NEeQm+JKtLhrNJMTXlsN6o4\r\ndZlDY2O6FrtfCoiE35Gl0Lhgs9NO7sYBpE6nfejo4zcT4kn0gjZYDn5ygfIW\r\nYKbyzE/lmUlS7DnuQXn2c+5YAotp1ouLSdQ8xM2ckQ0iWtcLDIF/2fFG5pWb\r\nKzgNqalP7M/9MMP2mDVss/S6r2AK+TeZP+C0DvRRa9OjgSdfZ8VmGDqWRq7q\r\n6Y/eRYuHoj3cJ9SwAyg7wMxs8bCSrchmOc0L2wDM4LzdOu1Tol3IoIH6aGnB\r\noiAP+zid1JK8wFIfJthFIYUe5WEJOMuYDz9h4O8X4deYPBqMTE9z2iYZIN6W\r\n6wu3pPlo02/fzKkPajGLAidv6DpjL28k7Ow=\r\n=UqGV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1628-256.0_1653050089589_0.30674831943867464"},"_hasShrinkwrap":false},"1.0.0-canary-1482-257.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1482-257.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1482-257.0+209e84c","@bodiless/components":"1.0.0-canary-1482-257.0+209e84c","@bodiless/core":"1.0.0-canary-1482-257.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1482-257.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1482-257.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-T8E33OvvoDjf87K5zUsObrAdkiUgsQ3vChc3SUd59/nlPHSrXn31g+oVqs0+v/NPoj7ZVEkVPg0nBBoH1csZUA==","shasum":"c7dd4749b8421022ac148eb56c4612c805b0c584","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1482-257.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4wo+HSApcHxz+VrSZk0YkhNc02QPxWPwnUh4UIXiMGAIgKqLCa7DnOxmCxg7uDa31r+bvnzJb9PLez8d1QZnkrmA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih48HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSAQ/+NXo1gwrv3M16/of1/8z8SMzDHXSL3o1mmEM1njdfd4Rck0rd\r\noRCMi+bpUB9A8Wh4f+q8o0pzf5jIDTox14i0n5DVltxdQJbP+EZ2t2FwMTKB\r\nFa/Nl6O50S5zx3SHHpG5/ClmVENbp6JGh3+iJCddkbKYxc9ujPdjtzQI77EI\r\niZtUS+bf1e+u4iVlO1g7K5cI1txIedrK1XE10Qy6g8yKhThI/9FXCt5ixu8Q\r\npgHTgFF/Uu+t0QaHIpgJ3xxxx6Rx/5fIlTdLhU8oTCQcZPlLTecqKtj6Se53\r\nHh0T97iJLSzmAlSToJZIxHfkWAAvm4kwmPeH2I3RGaqnckp2QbmCfOp8HWbW\r\nsMTe8/xFr+FUqrIWb4bhf7+mo5vgXB31+DOiWE4QqJi1Pd3MxX+LbT5hscP2\r\nAbSMuItEMcvUTn7FwJMgPvJi3ckdwSrJK4qv0YgXGV6fOR5uRYhzyCFmi/Nr\r\nNcSIkNnhcxbYSi2BZyk9jNNJXOQfYpyYmHyvbSgUaAHeTwOTMN/ujpwogbyH\r\nt2+VB2mG8mO3NCcYiYiV8XLzqMctkMB9id45ZyE7EyAqZsgskIZ3cFXtBJ7w\r\nW5cWVh+FQ4Y28SgbnFc0Mk1DgpRXFCJk5X1w0XcBMwhF4dCCP7WwEp86jCtB\r\nI8hT1MLUWPUtAwCnX9FMyYGOsnGBJaukI7I=\r\n=EVXI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1482-257.0_1653051142859_0.9642068515302014"},"_hasShrinkwrap":false},"1.0.0-canary-1778-258.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-258.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-258.0+209e84c","@bodiless/components":"1.0.0-canary-1778-258.0+209e84c","@bodiless/core":"1.0.0-canary-1778-258.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1778-258.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-258.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-nwHhj3joz3HTAnru1VTcbfs48HVbLd4xMsPihRrSYJjS28Q4B4r92ljTpDsamRiQLcUFcoD0pz357xfSiLSKYQ==","shasum":"e0d0917d0dcf170b6d032ea51765d98b8f35a6a1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-258.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxAEEPhl18uCS/A4Ibb3ZiUpEAmKg8rGu0rkyON46ufwIhAN+TQZOaJVt+HJXNshsUZxT8D3MGLUoH7AdUf+wC6ugj"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih5QKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrI2Q//dpnEzWl8Koa09hs6j3oMHTfzVYeiUO6rtUZH3Y1Sl9/cRZFV\r\nShD1R4qM6H7N7hjWEntumekik3RSQGhpS5Ob6g/dtgRZ+U8hOs8vQwqAJcMT\r\nkq7ttUpcNWK8keWzHDt098deKMVlDqdS08Xgic1vDT5R9TadneRpHKUuwDWL\r\nN2kzHPViQeTpm0r7/Je3rlsdyPs3O8gSuq+o7gS/oGJyHY9LjiDcsZJ2qq5e\r\ndL6qG1jOd43M3iu39FLDRo5Nl6+KhLBFNvC1aEW/tGmCZm0AhMmwgCKiMJ3F\r\nzsjysIxkEkkabXdYeQDuVwaqehB1CizKo3R7/xIMLi5hAmPkOh1cufvG/c27\r\nXDSzxcz03h2yE7W8k2G8zwSjh/MqiZ5hx/StJkhmwVJ9sj6JBQN10KK8DSML\r\nMouFFe1Iqxv2rJ8IyMz44px3h/Ct+rKZKNCxkVNVkGoyOM26qV3cUUn7bVKd\r\nfTLortl1X4+VjOO+SY2Vc+AxlXXOq+0LYZrZo2tUSaiYRc9zR9SrAVTUtFkK\r\n8juHo982rB+GtHfqi56RUR+0ze1r+Jmm5qZArg0zuZpicJZJJFC6pTCL++90\r\nLm81/m1MC1EtLaNgszLppOBRt74FUykVKgwCVgYSgU3aIibFrBFOzgrHfDB5\r\n/YrlUtb1QckmDIwX+whgQPyCZrMaaNHX51k=\r\n=vhQk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-258.0_1653052425832_0.9266188297242646"},"_hasShrinkwrap":false},"1.0.0-canary-1771-259.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1771-259.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1771-259.0+209e84c","@bodiless/components":"1.0.0-canary-1771-259.0+209e84c","@bodiless/core":"1.0.0-canary-1771-259.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1771-259.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1771-259.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-IkUaDG2JAvVRf2ydppp4YAwHHtNvRlgBgL5ILi1ma36Fektv4XaKofPYzzxFpDzrkNLHJpQnT6S1A7+zEHmOjA==","shasum":"50b79a84b2935b8badd14317d272cc47179e8c98","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1771-259.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJWyAmCkK0IDuD1HYwz5tG+9A7MauZOeXO1W2RWHM9OAiEAiO/uWfHX0r+Lbwg9pon57p5UylBoKHdJVwNs1xnk9Lc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih5RDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX5RAAlclUdCfl2/ffKGxkD8PMtt1ylw2QqHu9TCsoEPuykzFwt8Pt\r\nRhi6e+fUo0iYlqFsfVB1Ktb8zfM9r/zbmMLgdOJymSDm0XQoX340Hq2fyI+D\r\nia/tn4Ad+pK40BGFovqTRawtAyuIGYoPJkiwnZGngTZONeab9ay//xUqK5VC\r\n+gw2eQWFZV+Xo3r9pl8rvxgvGK5AioZReLdEtL9hn2tNRNEgv2BGDNAe6+jM\r\nxLk3yx2mwtmJmZHN9mUAijisutWqwIxQvhq7td+krEC4wyFU9AT1UfmPEzVu\r\nxIXIBK64FiMjuGBBBgL5uX65bOtxCunpOrI/h5s5nUFfJTWG/mKha7kwD4CL\r\nBsDiwnXCdm8QrkiBf4IkO/h1mLEKddvYgzaKHRrgfLu1nkk6e8xBl5gc65mx\r\nUToDcwLoy2itWMbNTuxCXjH0Vr4TeBVkGJn2Orvey6spk2zglbPNT/gMNvNn\r\nKIq0lqPSU2pxo2ZfQY05PRl/2XcmOLdDdv08grDTuQA2R5gGsGXs2Ms8AB+X\r\nQQtf3xzkS/5IS5QQODJSg5Lc9g2oJef7Ir4deGarijqSBkseyczLWDop9q40\r\nTnn1MU9zBP8uZcU1QNU4MdUeCsWMkPzZG9kuYm5oLm+9H7RJRKEQGeMmiU5G\r\nlGo60IDS3igW5KyV2VnAyeFUyHtiYJEr3ys=\r\n=v17W\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1771-259.0_1653052483669_0.15910017943141064"},"_hasShrinkwrap":false},"1.0.0-canary-1784-260.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1784-260.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1784-260.0+209e84c","@bodiless/components":"1.0.0-canary-1784-260.0+209e84c","@bodiless/core":"1.0.0-canary-1784-260.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1784-260.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1784-260.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-w6z8+nyt+tYKaKmmQt062M9115PE3AmcxTGSp17WoimFVxrqeamYvxSydL23ucLnhfMZ3URb2kFzA1nwY9ifEQ==","shasum":"3fc7836178e2694802c36591021f6d5113789700","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1784-260.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBcxr+DaToe/BHPmJWsV/le92ErTYzMJN6k7LecyQp7kAiEAr+TrcJ6FMOLgELuer4Jt9OgjmZ0QDwjgvccA15UD85s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih5cJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFlRAAoMqA9nEXOE97R/5pZHteLVIYVUd2pxZPIBwD913TJfrLsxug\r\n2lEfiV8AdaWcI2Frw9p+W3cO79RxWYEfFOTybmm6AS83bkqz4pI9kYYO0XB2\r\nNhayZvIr56qHuUnZIvWMU0FnN/HwQOTYBeZp5YLKDJbiapxvHt/U4M18xVbL\r\nD9qI26tzGsyjOf1OO0simHQqZin3eDcjBL1Ol0babSJcurw4pcf3rOpnVt7o\r\nqSUB18a4frbhAPbBfAUlqc+blgNRgGUaXuoqzYTlhJCnJu6akO5N3p5YJiv+\r\n7SRz2KDQYzdbt3EVM+G4YbEM8ebTm7moA+x3D/cxKy6GtMyMBKLpxSb0Ox7q\r\nC6LUEXY1hGLA5YHOL7jUog6HXbxfU83n9g+SbGHdM1A/O6P9fTOjmJQsOanU\r\n4fo2vRHB94aDpiYl18YMNDwOuIg293pWjt34pD39oUGzVjF8l0QIOPTDk24n\r\neSrtJom389Z5kx9cL0T9uFd9lojLk5sSIRjz21u2vIm9fSxEu0OMGirqzXFQ\r\nkJ6l3jeu2d5JmGZg7h0Q83NlWvJCbxCV2ySM/yRYGhCG7iSnB1icdLp+kHN3\r\nW7z3XwCeDpTzEQcSQY8+qKDFEBChxWAzNRmthmCEbZ3ScKHFv7wfIkixofdR\r\nD/Opfkswrb0oA3d/nSZ4YfP4I/CV4gRsl3E=\r\n=CWj/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1784-260.0_1653053193149_0.34294517255228785"},"_hasShrinkwrap":false},"1.0.0-canary-1487-261.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-261.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-261.0+209e84c","@bodiless/components":"1.0.0-canary-1487-261.0+209e84c","@bodiless/core":"1.0.0-canary-1487-261.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1487-261.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-261.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-YhWXhMVeIxB1iuT1Hnga0XVR6I7QUc0whg2BomU3hsnqw6xK/Tm4vc4dr0ZMkYAUKzpsJq+9pikGNLq5rStLMA==","shasum":"e3c9c27789538dce7a854fb8e8a1c5444478a18d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-261.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUcML272U8mtYb80M1ZyJ6dgUh/r7wQPoV2JW0r+sp9AIgOoexGGgyZzxCehCuHWAK7vR7b4AMDDhqduZysdhZwfw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih5omACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTdQ/+IXnYMnk3YQBGQaijIL1BbA6y4K0liUsu2ZxiW7J6/nlJt0lh\r\n37y2aWTMokyYW8JL1JvCgA9a3rFQH+O6h+VvTXXOXdFZm8hp+HTIxtdxNkmg\r\nzfgQrYKMDqFpRwkShLcPxWlYdLgmaFenDp5R1qbmAl6vYP/BES9WIJFv8Nn1\r\n0dr+J3ZraO+nKvsrBEl7oUgNrgdQiZrlARw/ibhU+Qy01DXwEOxBTprGbCCy\r\nwX7XoUprBYi++g34tOhgTslYi7RG3Qqpd5Ggu2f2Xpvqkc78rgTLD3W+l8tR\r\nZYFDQCzBhca370dda5NvVrfCBfpJNJliSJSwBWAXHtEfKV6vAkQubMK3PUGn\r\numeKfyj9dOXaHsldvBu4kKVDCtlNm3aEr7R2RgQ7py+LxGsNfiHYUxiFJnAI\r\nFnmaBhtTS5fEGV39pzTGxgUWHpair+VwEriUsannZ903rn+8cQr3hzLuRObH\r\njzrkwA2Y5v5l/+7WvEAzqSyelulV3KuTia1OGEmQAXFOrHG7TQsP0KhdsuyZ\r\np9s4HpyzRLcBWa27dgNLby/oeAWYJw6VGRaMZqtJ4WYh9+vQGkCYn1EqOYQs\r\nkvRFvl3DXcVbz1eRFha/AmI6zb/B0DcQvDboGg+P+qZj8SvVi1M8AYEIty4G\r\n+Tv8U5Lxrui4dkN2YH1HfL9o0eUgjMiPuKY=\r\n=CSH0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-261.0_1653053989970_0.5145563256687271"},"_hasShrinkwrap":false},"1.0.0-canary-1487-262.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-262.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-262.0+209e84c","@bodiless/components":"1.0.0-canary-1487-262.0+209e84c","@bodiless/core":"1.0.0-canary-1487-262.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1487-262.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-262.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-5mRaFxyXEXnkqhMS0CBbP//tclRfHIAhM9cFsGOqOCjQNL45HruQArsAYsIf7YlEnJMl1h4Q1RHoWGrQEzsAaw==","shasum":"d0a02e7a05b28a6c1dfd769216d2c8b5fc8c365e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-262.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2y3QSNXG4dz4xrwzYTLTH3ZP15mPOmA49f9KmcYcM5gIhALM82qhg3363swb0mzzmeBmfNuC+8j0ZXA7ONKCpOXNV"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih5tgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr34g//axVglebIiu39lZ4IwIpVELRR4FEFQKNjPhB29I6m5sqlru87\r\nKytNAXOlJdTRLqx1Ccw8PWWIucLtnRCcjsziEq219sAoKhn/D731Zxo03NFu\r\n8WzzWIIeoBFowCTmtVzhulnSpVowuCjVCwCoTAyu+cKAXRP6cHG2Xl+rimuv\r\niu+ca6kZnQeUqaRWRhKdYhy0gfLxhp5yk0OzRuS1WRHx2w7LP0Cb8KyzecGp\r\nJylZMEo4eyFx/MhD8skyzXFtdwPoS1bQ7VNhlTw5vXzAm8e7tURYMpRuDhYe\r\nrqOlT2zage4I84eOs7dTbeNjiPwcYxewknN0RzQ5fyUQsXbO1E7TxthmSWBf\r\nb98DNCBqAlsEj21adfQPWyFhAq1qEYSSsglEwZNkz1DJJsXubFGEAhQPnbJm\r\nnmqLDfeDkMExxGQATUEq1jcRCRXlRLivgaaUfy8HyfoyN84lJbWAFI4DOUgT\r\nx6X68IJUqzLPpxI5xi4ez/LrSURk3qjkdDnTK+uOrJMJQk4n1gwmgUz0s5nj\r\nLia0XE/zxsqneapPDU4kysjV8F0fRVOT0HlbC9SQyUgG+e7vlLHR5Y8X3h4A\r\njRhhFgTnhUqz+18hP/rL7UWzHr+mIEA9nWJYFPfHkJU5wbbA2pZ86OcQDBwv\r\nAGRtgv6aQvn4wjQPMMVWxYu1hJ4QrlzeHxI=\r\n=B7R7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-262.0_1653054304085_0.23739471616020769"},"_hasShrinkwrap":false},"1.0.0-canary-1787-263.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-263.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-263.0+209e84c","@bodiless/components":"1.0.0-canary-1787-263.0+209e84c","@bodiless/core":"1.0.0-canary-1787-263.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1787-263.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-263.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-sgEtCCk7WLXxZhC4AH1Sn7SaCYg/jvqkx9tq7MuQM0V5XHkkJM5xHPFLLzSF3KCn9IWKV+HF0LXQ+oGJURPXpw==","shasum":"f873b868b7f6788454a162f18fa093e5478354c8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-263.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFmGiibDE/FtSJX28eJgSBHH/GfZo0ZwCv8WIauYIdf6AiBQOwjhCZMNPj0JG9/jrrOGp8Z9YMRidxL9Z3P3afiMbA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih6r8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXHg//RBzlpmfRz5Gf4HXefdAdXgU2hspfVuGpFCD28gyHPDkauAm8\r\nWRyJTZN0f8ZUBCEF5fj/HDCihLUv9RcaTtNJWxF26Qj6fLyxhWEpYzp4tOUs\r\nEWqzVIr+d1O6cXr2mDBxYIxVI2oOhG3phs18aITjyzAdE+yHIZD9gsrGzIPN\r\nbXBnTC64/2a4IJnpDYmjGYWtjHkuS0qcqzS0SA5ETmW/r2oyH8CGNdITVjIq\r\nyRGBDCYLSM5YkAsyfQAL4s5rWVbFJwaoDrGrLPDvsuaydwPLfqHH/eIUpubr\r\nIYHLUEHB57gLewUfcxdw7DLf7tHPnrTHpS6EIGgEQc/qcEcBslx4Y2CttQ25\r\nSpFmSwajWC4/6I/0qMmRd13wkizzR/uDCycSgJ5fl6PXYGa88laRN+1xGRjt\r\nXt6PhqZ0ISDsRJfxT5jtMK6gbuysbsJepCVkHxDkpUGrMlbuQH4jyYrW1xVm\r\neYSRzTNW/RFHjKFzT0gs3RUASx7LzejJPuPwHgwrsPWgE+SFK2hKgMPeHiVx\r\n/lG9MqUh+chpt1ALWcGFha2idchH7i+HC5NzlYM0b8Ma6H0bA5tQtw8xGx9a\r\nMHQXwWRm4vLB0Q17at9EzGkdQev6FipOVlHNC/PWBAyWhxF/dhy0M35Cjdf1\r\n+jpztnctjTKF/zcKdJ37zo7WvVypOnL1AHU=\r\n=abr5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-263.0_1653058300554_0.052809838566959755"},"_hasShrinkwrap":false},"1.0.0-rc.1":{"name":"@bodiless/youtube","version":"1.0.0-rc.1","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.1","@bodiless/components":"^1.0.0-rc.1","@bodiless/core":"^1.0.0-rc.1","@bodiless/fclasses":"^1.0.0-rc.1","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f139d76cc8c251f33d2188f3574725198bd4dbd8","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/4.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-mZ2QKpzHQ5rLtECH4nFguYkcF3ptoLhElnl8Yuy6UGHNXPF4Hl6wUEGmO6AVNZoaFBK0UhGOyNn86k7ccSkYcw==","shasum":"33265257d12fc06269f7038909e0f68d1d492bf1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.1.tgz","fileCount":22,"unpackedSize":229806,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLcyqi8J3l3kcpC2JKnL+nQW/euK8zV8eGSIUhYS741AiBFVIZkYsfTNInLBU7/r/K9xlXYwrfU+prxOYuGZD83GQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih7SsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUVg/5AWe7JImseNrCGHxE53u/l/R9dJQCkwmRiSVEZTtQ1+r2zyzY\r\n6HPna7X7G99fO9Kj1+/xwhQL9pxT7GqQj+yI9bCYFIrI4RpWsS+CtcesdBdr\r\nL0Jf6Si60IxhQxiaeVJMH63ml9P+9TotcyZdzEXNT2s5EyehrK4cEtyYL6vf\r\nER0sxfmPzL1wP9mmdYsljBqi7tRYX0uxA2WCK9dC3iHK16PImJeh3zl0F3i6\r\nGT/3JUX1+rujnJMtxIGgeEltCiN4JhJzWb4p+E6LiBEMtTW4qQ3WfoYuOXK8\r\nHWdcVg7vlMZQta0SSXt8M6OxiqGfiX37jsoVSoPNhw2soDGtAgbdvVdEZQ4w\r\nK9DgaqVkROmyjLKIu3Hqka0J8xJIkUeU5Tlalm/w+nftVs/W/IRWixk1SL1J\r\nrGl+uDxs1pWitqx//7cMgj8iVC5DC3cnT7dw3opqdsM5WsHQkl/9u66gduMW\r\nOogIj63gIlfQ2t8rMzVEd/4KO6vnGEgIRhql1wPHCiWukxWgpAYDxzxn3KYS\r\nMrfy7h2jYdykWe1xUCWN3OPreykClu08QWL1+KEfcg83F2s8Te7VyEtUxb/Z\r\n2gyCyA6zsuDXeQRKh8gJSr+pbnODj2d/cWr0Z0izY4XcAwD+Es3P8bAR+apN\r\nv3K0MlIDc5vzfIQ1iMteZ80gV2c/dukQWRQ=\r\n=TfEM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.1_1653060780791_0.8576161393807085"},"_hasShrinkwrap":false},"1.0.0-canary-1797-264.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1797-264.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1797-264.0+209e84c","@bodiless/components":"1.0.0-canary-1797-264.0+209e84c","@bodiless/core":"1.0.0-canary-1797-264.0+209e84c","@bodiless/fclasses":"1.0.0-canary-1797-264.0+209e84c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"209e84c36556237cde51075650e797c131fb5561","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1797-264.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-0rc5771SLSj9l4gIjVK2kFXcPJU4FCInOgapigyR60vzvi6sYE14+Qcr6SNHw7wza1ULL1y4RAN4tcAdCAZnUQ==","shasum":"232220e6e42f82e8ade73ee36d243e7d29e20044","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1797-264.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGT/KOxrU8thjVLIw3QhbrPr4DR7oq9dWmexGJfrjiVhAiEAss8KXi+Yp70rwQtwMq/Q4lpLjkAkSjVon/T7/CXRjMI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih70xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtwA/9E4OPG/1LSDbdOnm7+i2MB9hUUdiRaxnTqfNMNKCs8Q4lkp3z\r\nq9LcPRvzbXRIW13Hg1h5yjX1PHH1yJ7cqQARXzknh49QJtBxtdAu0a+kySla\r\nRpgj4a24hjZ0T0aukd5KUiCuNXw9kzztG2yjhbLvMkD2hMY4fD9wn+Tn+xde\r\nU4wBRURGkJETPIXDLNNY3DK5o3jOFn6AIdCnEcgj9jmyre4IJeAb8kNVA89l\r\n6U5WiCL1vgVgXMLl36j2o5iKDez5JdIk5KkGy7eSlTK8CY+GycVkyRg18ViJ\r\ne05QyTIwEJ0MhBMTrsmwsy/NehLoFmLtHYxterNxHnMnbrnJaygNm9xdvXxV\r\nOsRdV2Uy6uEUy3hh1czy+zvL9PSdqU5+dAxyXdgIycqIq0LjaZsSD6e0rXNl\r\n9w3a5E093ViJUbFO7EqPS+KQQyYyaruP67CsOLW6eRcheEE8FpwI7vtmK0Q6\r\n+ohS5KZMvOQuWqED7XVVvZpSPdKE21wzT8f1agBfMtSgZefigZd84bUwdDLX\r\nWy1xd453mo/g7u39b9V32hwB9mCTq8RSURaO8zkTY6aDCtot2VcmDLnA+4FV\r\nN5DRZztwrjjGdV5DFnGxouecVsPKtf5th89ZhfwMt7vhGinhxuJWdGBfqgez\r\n105tpq4e4hOShkESYR15oJYv/CFnnUwPDoc=\r\n=dSX+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1797-264.0_1653062961611_0.7033758154314458"},"_hasShrinkwrap":false},"1.0.0-canary-1482-265.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1482-265.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1482-265.0+a409ee7","@bodiless/components":"1.0.0-canary-1482-265.0+a409ee7","@bodiless/core":"1.0.0-canary-1482-265.0+a409ee7","@bodiless/fclasses":"1.0.0-canary-1482-265.0+a409ee7","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"a409ee713517e813c24f9b7e0276b48be51705f4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1482-265.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-3ecacYzZV8wkVXWHa24o+S5lQze9C4wuiLDBCy1qwo9V/Jic6u01MUnY86+Lk+xrZnRBKyqPDaifR78dUN08nA==","shasum":"0409a83e3607436ce7a00aea57006a568a00ab4a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1482-265.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHskAntjsi3o0qkC1jK+ffKa9Usiw4DMNlLHqOEI4clUAiEA+oBdhu9K/p+q8qgPi4tbyIZ9ATU+dxbuZMKVlZUpo/w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih8wnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5yA/+ON+2LHeCAAJCKf3ObPw1VqDkKX78Ft9fpWtkeL7ZVU8B9wxw\r\nvOLdUNjTU3tJSMUt/n+uGOON7Sc2q7Tu8nbqMLeOyBgQZ1dhithexCbkZx6C\r\n0S+VftYB3a3DrlNMYRLBjZBBN+xXP+Qf2+ZcQAHmSWKJLt5W2mYZHxPX8gei\r\nOk5vVA1J3ag6eTnOPYSWhEoPxETxnRlO3jLEDDL0nJS8/JpmyqTBtCWNi7OH\r\nqvUeiS0jwyFDhrxIf8aYKTXKfFlt9XNlNBGkgmSPu+pEWs8U9nwgx6CoIduS\r\nBxUM0pN+R76kDk1PQzwvAUyZBuyhV0DinH4hLOSPcrISL0x5Vmce29X7UHgr\r\nqArk66h+9+OkD8xt1SmNMo+PavmUHI8UI2Nqy4lUq5NwrlPyQ3ZYOpedwM6Y\r\nINsFbVvBEwmTCJi22gBokct+VEl2LY3H5F35xm4OPbm0W/ubbfAIC+KI37Xh\r\nrRUh7ZA9hIiQTmO4qoSDpd7de8PyAVywq9KV4h7oJLPM0ONdwZvLfvMazMse\r\n8BgXE1XRgQEQCDsLRWwlXyetokjyGK8d1bFSVpVEiKp8Fks4LpkaCKPwgg1Q\r\niPLKIYRHdNS7GrFppZIjrSRTzl+XqTgdlL2jfSDGi3Gho8xWWvVzvjE1IAmq\r\n/dma9BzoIRICupCfNl3anOt1/c+snQHB/gA=\r\n=607i\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1482-265.0_1653066790987_0.46287806506959184"},"_hasShrinkwrap":false},"1.0.0-canary-1482-266.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1482-266.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1482-266.0+a409ee7","@bodiless/components":"1.0.0-canary-1482-266.0+a409ee7","@bodiless/core":"1.0.0-canary-1482-266.0+a409ee7","@bodiless/fclasses":"1.0.0-canary-1482-266.0+a409ee7","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"a409ee713517e813c24f9b7e0276b48be51705f4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1482-266.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-OFcNhZPp/iu+TM/OrVdeOZWfKvb4bE5oHIu0XAHudPx7XXiooT4aj1zDFB3iRi3+qh7QX7PDj1uDFGqGVGwOVw==","shasum":"d6f78654457869e39bec9c3dbc40b3500af91728","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1482-266.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyz+xH1PrJnjFwlrtUodCKPuYoTr9l2oPju0zFX5mLWAiEA15jNGqfE6sHrZ7GfVV2Lgict1pxX0jYTUXcRTgC2wXI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih86XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzhQ/9HIYeRQVrUpjvUomerzBQ1pnKPdJ0GGNrmSK2tG0ABu45uSuC\r\nTYsSpM4iUHqUrhzWzFxakXtkRSWay42f/WywTQs1syz9VMrsPGOMNvi41F4m\r\nrjMPYfiRbT/74YkEgO5qvRB/9nCmH75Lf9NDuFF2q7dHDm/SB4BP++0xQw7P\r\npqkBKhB0rCfvQxIGfBO1jtWKS1lcG9PvLhyFbct3xa5Lul9e4LQcHBHBcGMa\r\n9Yv/WqkZCVfNjZc7Uf7UF9qQxo8jMRh//sNT+KVJko8XL3QViXEDeSaf+HL2\r\nGmsDH2yL1tKeXRzvecSHuwzUhvyz5x4s6/JTXy6X2ErOno+DOm+aJPuBDnNg\r\nwcJSfhClLmhxGgeSfY5bCNo5wyTSR9xraulPmLa4Ga3h9grMZDcSyH8yq+gD\r\nRR4kDpw0XMTGTRddfJQxxjf1TSkp467GOPTYa/9c+pG1KV2FbrDCHHzL72Kj\r\ndvoCDFrcljUtTL7wD+a1FsvXXnzP204FTRgFqk/C16YWsZ5UwKNrK4KNJGsd\r\nB+cqjAmmxa3wWorajus+OMuNKeaHfCooP0ov/wSrZmVNme+oFtZhEAK9H7d0\r\n1fIrP2wXSU0AN81ykAeq7Nqc7MyzhcZml1JqPsDeoJbmH+mMZ6qIZz4lZUmt\r\nNiaJh+337tOPh0ojoYb/nlD2XjDrjgDcINU=\r\n=WX98\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1482-266.0_1653067415442_0.34932775903807967"},"_hasShrinkwrap":false},"1.0.0-canary-1798-267.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1798-267.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1798-267.0+a409ee7","@bodiless/components":"1.0.0-canary-1798-267.0+a409ee7","@bodiless/core":"1.0.0-canary-1798-267.0+a409ee7","@bodiless/fclasses":"1.0.0-canary-1798-267.0+a409ee7","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"a409ee713517e813c24f9b7e0276b48be51705f4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1798-267.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-5m8YEjj4JIZsci20PsjAm3ZgXMYP1coAo4XR75NCmVHjdIKMnR/BoyktsBKLRLbK76CK3ZhMsRbhSVeklHoxDg==","shasum":"c21909e6c90ec782f3ab0346dcbda4f691180992","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1798-267.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAQpY8uN7+qbR2PSAbtMBwu3LDfEf8RrPluwFi5Urn4QIhAOZDJ6ctFdTIXi+4ZcgvZKW7fcrjCRyp5DhTZnYwaaas"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih9RxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpOxAAo/gDpPTS4ZEnOdVrtUy82itBDhT0+oHAvNKONO9zSuQcyYGJ\r\nsn7jROfJoqE5MAgQdDdk+BHHZV96jRz23T9bvduN5Zt3na49TujeNMaYW2rp\r\nxGV/rzDwC8B/COntF4H0EkLadIrJHIzrN9cUxUVqQLBO0yVULbKvJ7e+diI5\r\nMALYBAqm4mLds1Y2vsWwjNyMWHs/1lQV/uODtA2CzP5nWs2ZZLKB0DfkeLbJ\r\nvAoUP+EFtjaZ5guSA4MvBcp68SJT4bzU5S7zNup83+Tq2EtVQM7i+vUrKmWD\r\na48WiLmbFteLz9Um3RGZ49k8vv2Sqi4p8/L35GdiLs+bl/Ar7V7Cna2icqj8\r\nsf0NCNVTN/9GyTZ77rYglzudT1OYPihNdJadqp9mGSCH6PfVejuIfiGKIxxy\r\neY70HSstBWxVDBa3OZnooKdvvonSHw6n6AAI0XK+osBQuAN5a1+tJNx8zE+4\r\nfCgRSgIC4fKarA0YATXE0NSmlD660dTH57zirokIGgYpTW1umqkBlBfVe1vB\r\nwLZ3m+VVjbMdsfGLfnrnK0iG9/gA2+hplPo0CxHM8rkXVZA0AmsvY/qNrh3L\r\n4ohzMtw9AToN+2u8NWF3OX/hLV1TEzrbjw+HNWgCqw9TL34sFe5uCaH7tmYf\r\nq44LvAZN+69rb6gyK82kOOIBY2Gv2i8/RiQ=\r\n=YjRE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1798-267.0_1653068913006_0.10219099169620893"},"_hasShrinkwrap":false},"1.0.0-canary-1792-268.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1792-268.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1792-268.0+a409ee7","@bodiless/components":"1.0.0-canary-1792-268.0+a409ee7","@bodiless/core":"1.0.0-canary-1792-268.0+a409ee7","@bodiless/fclasses":"1.0.0-canary-1792-268.0+a409ee7","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"a409ee713517e813c24f9b7e0276b48be51705f4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1792-268.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-EFOExqVdwYaRSMMSALpNX86kvDaRII49I0XyiELsjhytkK+EIj3Jkwld7th7OdkxkUOFe8+gg7SIfvlFotvGXA==","shasum":"fab70ca30da3ca8e4dc4c9244b9ee64951abdad6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1792-268.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvRqsbsAlVj8LomZat1D36Olb9xAk5aR619AKRBwZGRAiEAq0XEKOMrdcA1VF+s4pJFlaK/Em30JbfpZ8XQggoH4NI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih9yGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWJRAAmtr97qpOBi6eI1sX14t4xLZMSwqDOJXrdjaISYOXdMb0AajI\r\nP8YANz2zaEy9YzSWLbr0hwMADLSOk4nESFes6XYIIny5yDRfp5NrPTi/05cf\r\nB3Hyj3RrUvK6r4zPsEbJaS5uey74mI7TeKE7MjfxEgw9B6k7aDRapb3MBGat\r\nsRJEnNcyQf2sJJTF5hV6y24faM2/DaOh5aXEETB95buObTyD7qIjPhlzcb5y\r\nh8CBbXA3I3I83sKPEcohLfSZ/Ao0HXD+bre1VhkSAiJxoJZv6SjAbtYH06sJ\r\nFK8NUiU72GYn37I6oMOpo1kaQdgQdHjYqqsU/CoPT92gcrINbsfC3niAw+Di\r\nZcQTh61Nw0KHgqWmI6K0TdQlx9e8hicT2SCV54znKuTheYn45FpKrP3zVJXY\r\nfYfuZtKuxgUZwN1cu+KtV+F7o8UUqraYcU6AVby9qkL1FkOmhIiy+8yQXa3k\r\nPE8IOsWkC1KCHL24fzENi4p4A1ThaD8Z5/zP3mLNoRJzLkwhg3yBTABmboxz\r\nPDaFc3hG9pNWzYUAuL5XUsEWheE8BwZsAboXvwEYTbJ80LtdQhFK+/MWL3mF\r\n5Gxaamr4bpeLNLBtjOk4RAyHpj93m47djZ9BI2kLrPrpTKr3dgR/eYPgDrBq\r\nMm43bTBDeBCtN1YRJkt65X42pPRJ7ZqNeKQ=\r\n=PmJ2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1792-268.0_1653070982693_0.013281257086426912"},"_hasShrinkwrap":false},"1.0.0-canary-1683-269.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1683-269.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1683-269.0+d0d9732","@bodiless/components":"1.0.0-canary-1683-269.0+d0d9732","@bodiless/core":"1.0.0-canary-1683-269.0+d0d9732","@bodiless/fclasses":"1.0.0-canary-1683-269.0+d0d9732","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d0d9732d9dc9d5a30e4fed0128b2d019a5ee562c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1683-269.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-uEbHkMh2G43Dh28PTo6Yykgei8gScvQ9c4eS2XsvksDx5aHeu7CeOcppifZNjbpFDycOkZDrXitmbJwhTv5WMw==","shasum":"6cf1e8b8aba8bdab4576481a0b018983a26c7bbf","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1683-269.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVsqxzXy97o86QvDDlJNIuJu4tyG5ekw2GCry7pUgclAiBZpDIAog/hbns2Vlx5GkUeq/zAeqzSc50HsdRnAvJ/4Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+53ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvIQ/9FDMEwkb6eCNGITfb/Wgo3dOQXxo3MoH32ruhKlMcEAb6YIt+\r\nB8g0nyMUXv/Iw3wVO0nIZh+h6JFwoL6aNIQveDvBYDThSOaMfJYpf3YtvKLQ\r\nCRiZaHHYv4x/qS/Pyd0lQ5sOkB8+mYKHPyLU1WiAcpYw2EOQx44B5A1a0/mK\r\nmIZq5/3nznCooKYbeN48YCwvHgjXxfX26Nm09rU8NubfajUASR5h7kZwZG0y\r\nGis8U6bjSRoM0Xb3F7qqAd7mo5KHJwf117Y+OJEv9N5Q2yHbyWRhQLM3S1LQ\r\nC0dylzPCTtRQlGt2BtP9A/SGAVFVwzvntabNuiSFQqRR0TfC7vc+Yovbo2/5\r\n+8KfJJM+/evYsdarSjm2ccSwl81nZAtW5Ga8hdr9wbUR3hiLCjqYh95ebEqC\r\nid+K0mplx/mW7hdJE3CpoBa35tROv6kgnK3ysLL4dJNl+BM1RYhNiPux7shS\r\nI1COGAmjHu5l9v+cncKdbQ9SItyEtprnP2PlUtcgqCeTTvEA4i02QvA4STY4\r\nagZbmNd9YfoxHkBLQTP/4JtGl2/2rOBH36Bx7Rx3MeKwyrZHcvLlbaiBUaBV\r\nR53+pTw0PC3GGNKeJegrk2zWQjdX0MLvHk9Az7r8j43TXLwGt1p6sZPGh0ZZ\r\nOOTeMuqUpx1Wfj+Vu7u5sMXLxqnj29llfm0=\r\n=3zFh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1683-269.0_1653075575187_0.23718445285021827"},"_hasShrinkwrap":false},"1.0.0-canary-1784-271.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1784-271.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1784-271.0+d0d9732","@bodiless/components":"1.0.0-canary-1784-271.0+d0d9732","@bodiless/core":"1.0.0-canary-1784-271.0+d0d9732","@bodiless/fclasses":"1.0.0-canary-1784-271.0+d0d9732","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d0d9732d9dc9d5a30e4fed0128b2d019a5ee562c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1784-271.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-hdrCQKmmGObyYXhqVL/Xlbdp67P/sggM/2CJEI+QoqLDU2fx01qDk2hH35ohABgOOuZcAO19MpJLNnCR+cMiuw==","shasum":"ede2a38a6644c40af1f7a14b6b97374e4dd98964","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1784-271.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTY5PTFb2wrSg3xUOTjeggwpnjk+WsMKLle5X8XjcbvAiEAsTvS0uZ8BTymU7M6I3GmDOKqs4xxZGv70l2l0ubUEFY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/AVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeIw//c1wWnyYqF7Iak5OhoCZL+08XzAPGfX0RHV7L0ZIiFRbKMei9\r\nqxDkhXbiIuV1BJ/xGweSIPATMRQoLC9IzhoL9LGJ//59SJEp6Az53f3FcHp0\r\nIIoZeGBhuH1cY8qaSC8ksk8xD9s0n70CVnGvNA3wSnYs6plIZPnexVAStl1O\r\niLt0jhI4wPkLdv5tKbw5u7UYklIX5hhx0QBGoF3xvxDjzcIEa+IYM2G3+AbJ\r\nqWhw2j/EgXZKeMjvnvqpQILyZ6RhJuM3W0vbI5cPIeaghtom+eGAB1OcZnX8\r\nj6NgI+vz7CDiett7/gxobSL2tfMm6hNb0cKq4pBk2ZDhA7lNk6ufgmzuHaAz\r\nG59OBOmD/ciFfSDQ8XdCFdxGA0olaMSighSP/H6JyHJatjC4ew8MIvx9IkT/\r\n85BL0Zs1adx1UNdsFeOEKQPevPVoDeU0zT+zI7t1Fd01IxNGsgvA3AeCUn4e\r\nQrnYsQYvNLM5fn1/COZ4k2tAISy7c3MHTKwT91q1ZD6tYryhOV6qkY1kRe+c\r\nrodDZ5ntOFfF0ZcdsRGYLGQLEpXRUuLAoAvwCLk0sGAhUimKa77fSX8zMuqs\r\nWLTdwSzmTegD3YutFTHgKImNAkbdGlnShx38t847CYceWKgyQRFYZxf/IxIP\r\nrfLkiFAffe1c1JFa2gYwXYK08FHQL4hgKTU=\r\n=zj0j\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1784-271.0_1653075989495_0.3627647460299952"},"_hasShrinkwrap":false},"1.0.0-canary-1794-270.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1794-270.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"npm run copy && tsc -p ./tsconfig.json && npm run build:api-doc","build:watch":"npm run build -- --watch","build:api-doc":"typedoc --out doc/api src","lint":"tslint ./src/**/*.ts?x","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1794-270.0+d0d9732","@bodiless/components":"1.0.0-canary-1794-270.0+d0d9732","@bodiless/core":"1.0.0-canary-1794-270.0+d0d9732","@bodiless/fclasses":"1.0.0-canary-1794-270.0+d0d9732","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d0d9732d9dc9d5a30e4fed0128b2d019a5ee562c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1794-270.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-llkQzuXG09zbaQSlmUD6EyNN+WBOlPMC3R8I94IAa5vsebvOfPuGEAsYW4oOEIH467TTBsp/hf3nnXP9jDVo1w==","shasum":"64017cfe5eea6f26491f26c509edb29a32588c3e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1794-270.0.tgz","fileCount":22,"unpackedSize":229892,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbLEJkwsqQQiL6xIdENuFXJNAupMH/z2G9qfrnkTYZlQIhAKA/Lbk5YfX3bS+9ScVZgkAjUwJlu6j4479/nUCpgxYd"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/CfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3pg//XV1HOp6vRboh8Mw75Yb9MrNCP65nro4SOm948vRHTZw+Hm/w\r\ntQgR47x5gxlRPh3A1vZPmja0G3a1/g6Tz8or0m8hBdMcVHI37aNn6GQQClJ5\r\nYuAQEeX824CG6XL8r8sJr45lhV0Gng1hcDPQe3I846utr1r65n3eDtkQhJb3\r\nzgdOmIJyv09jF45U3vTsJFdCFcxh5EznvwpwNrj5cYwd0wNcDHS+Ha5zTFkY\r\nvdwyw8a5Bz40LIMDbIm9ybJK/67wJAQA5nY7IKUs8CBpoDQzP/p2JbZ5av/g\r\nB8BFePxtzIxRR2NP9LcNtMgybeGI9s/NnDZpxu7WCkHjYtxRbZnomezSqKJQ\r\nL1d3bXpktXtUT+ZJBUktE/kCdY/AVyt7IOxTuSTgD+7Fs+6ORYNqY72hMljN\r\n42/+Y+M6P8cPt6+xW9TDvIPzdjD/ogrBMBmbpWT0Sj3RpQh7rbgG1P53tWaV\r\n4lM2hO2sLWWRgH/Fsf6crTRrdJtqF2Nrv3htEdadlN3+Y02rRf1vl/T3cr0z\r\n2dkHxG1nUqEIkG7hbgLWW8oT4Po7oTok+UZ7FquanaKdYfr7cOtJOeTH80XK\r\nu9wEScp4JzimyWhvPJPwvVDjW15LYenPRYLOJ+OoP2/jzql2edAo3Mzy09h7\r\n13stlDg07jB1CEM9/AfAJpIZdKPb5pqOgnc=\r\n=tqdq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1794-270.0_1653076127277_0.43847830343971195"},"_hasShrinkwrap":false},"1.0.0-canary-1792-272.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1792-272.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1792-272.0+4a435fb","@bodiless/components":"1.0.0-canary-1792-272.0+4a435fb","@bodiless/core":"1.0.0-canary-1792-272.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1792-272.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1792-272.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-r+meXZpjIp2W7BW346seC67R9R8r8RE+3QpMRO3Qy1RtlhC9QYApggmhkKv28/Fsji1jim/YVQSdV5qbVcuTKw==","shasum":"946ab9d3acd8cec7bc5171453db75fa3ffae5ef5","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1792-272.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECBqT1HNQ+xcCu5HZtQgwoNj+g98DtXc6LXRG2uXp37AiEA50IPto3YdrxfD+sve22wQUy4wS6xJIw6QocCqdKHNuk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiAiyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC6Q//Tx62Y2DSjgrziTN/J699v5v9Ivj9z7h4+MjwI5KGD4a1EjFm\r\nQqTE7xHjxAUHR4l7B6fGoMfRTzCSEl/HX/xaKaY6e3fQAVSae9DUK1CrpKuU\r\nSjA4xSI3WSWsrDJj2fK8q7nwdsOLxGYyxg4+dwKJSeOVafgJLa1ZHUsqLTRB\r\n2hYzCERTUPImADCAeZ4xXSO+5uKPDz28qZuI8V8zUW7uYa0n0bSJonFXwybb\r\n9LPMm6vT2dv+VnnogQcU2woqpHx2j+FYJA6sSm2gkc+p3TjfdpFT8xhMFE0s\r\n15o4AiiqdDt7FnsiFqtP7g2TIhC8tc9ooSc0zy0P0w9a0dyX1/FOTvGIXySP\r\nvWbfTmXvuQC8GD0A7nJI9xMWGHCBhHOb081AanXJzLNowouL14Za9GADCgxF\r\nGk/Y9dp7w0LsoXkN0gRX/5MUzbXFaMl33FhQDEOZY0g5+7tzwtRXMzhYqt0O\r\nel3kMjlSGEo/LU+jU1dZbvARTLbsxC99rGp4x281fbOy6IxzCiLrRcbeQSxd\r\nQBAESUybIf2lewwy3bafQFwRqRQsIDHVtF/pvivK+wS98qKlmAEWmTOGrxJ8\r\nZCxlDUE6jcZ6U+Y0qa5Qhj0Z6Dd114o8iK1Esicv44NYbaRr3CEC3194e81q\r\nRAONF9oqMu5pjbil1xoDY9vNGUV+lVYsenU=\r\n=hWNN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1792-272.0_1653082290453_0.14661952862770855"},"_hasShrinkwrap":false},"1.0.0-canary-1787-273.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-273.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-273.0+4a435fb","@bodiless/components":"1.0.0-canary-1787-273.0+4a435fb","@bodiless/core":"1.0.0-canary-1787-273.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1787-273.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-273.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-RJn73uSeFrJkZtCibZeNELST95XKhL2mZWSLSGoUQ/HmIdccRGO/FJtr3BBCRJKCrnjikU5ENo6vbP6KeiAusg==","shasum":"c2fd16277a21e6273491b34051629c7cb92a1180","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-273.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSz9Rc1Lp4JajpPDG7cWvNfVe9/T1aOCOzb8JzzIXBwAiEA8kyDziPqDQHbnUkkf58sfyHcmoIQAp/dyoyD7rPXH2w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiArjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn6RAAoyWE05dn5ErnvdpPmJEYgypc85bc2qe1Gnjwswd+CdU4aZA5\r\ntzyU0gNSN2VvqdI70IxfKjfMCzKFs5FIQIKIKyBcnOLHrRHjXndINuMgNnRU\r\nUBisIadZ906v1drYFY5UZ2XmklxJoqIdCAUTC0p746GIttd/TfLtoGTfUBvY\r\nMkoQdqZoUBQHv4PSYcHOWujSjqw0/S1K/RFxb8+QYsrQqqoiRq3/+BbDtwC0\r\nYwUCzw0kNNA98YsqzmR3x3jg1KNvvtvfD/AIq9Rfdwx166k/YuGiWY+oHBX7\r\n1oWUAXXqouqW7tbeqGXP0TVXiAcTYB3TPM34z6Q6fERwW3nCdWq+CqudDp1n\r\n/x+3rGSefcGRL8jGLJK3+E0iq8/JnCoqNOXNgRr2lluHQgdGNjaw4MbHn4ZY\r\nLuvgVjZ5xjTVCsD5x87ucs0+8v9VEgziY2M5Wr2/pg46Dly1PBC9Us8OOIgb\r\nk7LB2P43EzwhS5Dm3JRN0Goi8yoEqmc82kExjXMRPfSQUPHmzVHXD2Oinax7\r\njW4B2uoZRqLGIyrEXggqBjf4WNWmu6z78jymg7f9mbnASS1dewb7n3f+Aj7D\r\nQvr2Hwfphjp6ijQRqEVlYdOcHbA4Ul8F8VqIB8pAVYj6gi6anZg22VOahkPI\r\nqTqxrOoCceerp14+AfmUiKfWjwgWiuuz9rw=\r\n=dRDq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-273.0_1653082850930_0.5260167435027041"},"_hasShrinkwrap":false},"1.0.0-canary-1799-274.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1799-274.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1799-274.0+4a435fb","@bodiless/components":"1.0.0-canary-1799-274.0+4a435fb","@bodiless/core":"1.0.0-canary-1799-274.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1799-274.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1799-274.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-svE5agbKQbZrdfj0M7nibccVYGjy+XohGbeIxxyuK64ak+WLK+f5aFAigjKEXFx4ohqkWdzlTxYRlF/pC+Gq6w==","shasum":"b8c53e0d1979b82880985436d525a5be0c4f08bf","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1799-274.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnmL/t0I2vgJ5X7Ny7e6+trDo7SDheEKNCIWe0fl06TAIhAJ2OvrHeqM5D3BkvHPwc4Pd/66XHLp7ZvCcRVtJiyjBW"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBQLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSjA//Z141XfooyuvZ37B3r5kSBqWYgZ5Jz6scMjNLKpG5iZ1gqY8T\r\neD1afvfJeybXxMBYTQFnsVC/Au+bAxrLQzEXYgEPDF8qu+EanSQngzNC3aKo\r\n1yCoX/AMgamhVo4iQXQiaUCOx4IewGZ6IvT+6Ki75NVv3Cq+SXBa3P+Cu2oy\r\naOqHGHtfBklkTl4DCGb/dJLkLM8O6fdm7io5T3oFRCjCbyYCOx2IhJ1n7yVA\r\nAtn0O+VJx4xb26BHq5r9iS11Jvxla8N12uoLulnKypCpp9gqZ3hBblkYkQ3E\r\nvBAcDdJ1Kd/VgrcRvSqVMSGn4kF5E0+kDmitZ9AyAPY21ro2sxGxI50sVHIF\r\nHHEUpNsqvmIGTdPV1dSask3cqjvodHY06OO+3LZDjMyozsMjXD/Um7wEOf9m\r\n4vGD5H1czamTsGuVSA0S/7vdBhJe3N7Z0lE5R/CVsnmoPwNrGQ007X1JrMDw\r\niLhtgPtv76vyztnHB/fNp+kCEg8ni3J92xKD7AyvMpqTkZ7lHBYuXOnlIdPX\r\nRALLJ7PEPlZvi58rlP8Td4gaqLIHAUmRH32VBKSn6UwxwsxJuSEnvdMgv2rc\r\neNgy8JvStLzO4kc0UfTIm72PR61b2HsX7rhU7MGgKpgJdU8f1ltZJAMgUfSF\r\n/gZ7z3odKSTF0yhWEXkTroVWZJSS6qna5nI=\r\n=qD/8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1799-274.0_1653085194943_0.2131480611505161"},"_hasShrinkwrap":false},"1.0.0-canary-1787-275.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-275.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-275.0+4a435fb","@bodiless/components":"1.0.0-canary-1787-275.0+4a435fb","@bodiless/core":"1.0.0-canary-1787-275.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1787-275.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-275.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Y6bZ03tpmnuHaxbliB1jH36JVOIB/0zo9FDTbUVDU5Dk7dn+NU+WBoZ64cwVennQBb0I+ZE3EFy3pQwiwvkusA==","shasum":"0cf98f576a105867fbd163498c772aacba53b94b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-275.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA11pvMMzAez94N/0aTnB8Nn8yZqsMtBh+t5+n516i5rAiB+QBs0FUomr9Os7LyDLnwf16RbphYWL/ZgbvldDwldBw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBRiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLjRAAilU5LMdknrz71A/qj+LFIkKRR0rYydSE0KGZC0gHgLzYWscz\r\nPm2Eq1wRNIEOhHrcSsmaGntCStYA2zTDCCCDjEoecztlo4gMZULmW1oDXfEd\r\ncI6DBsUYjHdSpZU9xFa7hmH+OL6Aha26IwzqMtNtDYHAoXVTS2q/7tgMASSd\r\nuCsbWd4fgyprn6EEtp6UpZ7AaZ28efNEbvM3YyQLdxntI+d8MHNX9T5Qp3YO\r\nMNdSQYVlhXdKau+3pCCZ9Ujt2yIDGPJO6x5ZW3A36gbikHwsr3BzHk7uZ3iH\r\nteiHdKjGx+JGTCcv1UVFxfMPSjnYlEmxT1QDXIVxgb+zk/ODk/jP/ap0snjV\r\n+LVJlca+xxZGHbUYzQhtIfVTQDTHujJMK3wYSMrkVWAkzRtheEo8Ky9r3WLT\r\nw1q8DMMiYyJEPwdFK6M/s8Ott6c3c9dhFGT7FmtoXT1a4hOll2AtA+BZC6Xq\r\nCa24c8qyPVQs3h1ZQBu9QCCHpoq87q9lWQuOCkW+7XYfVT9dKEV28qja9zYc\r\nWPNjA/+Ow4YzlLLeoT6auJ+GRsviN6zQUwvI3tB57inGHRmHxkRzO0T8URJ1\r\nxaAXqXF0SmYwIfefs/0fQY641YLLgdXcjdfsGYUyGQD+hyHSg237pA4cPDaS\r\n9iUQg8GMC0c1BTcLdWBmrqFZ5zdHSLlKfSM=\r\n=UL2K\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-275.0_1653085281946_0.4316070155931293"},"_hasShrinkwrap":false},"1.0.0-canary-1785-276.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-276.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-276.0+4a435fb","@bodiless/components":"1.0.0-canary-1785-276.0+4a435fb","@bodiless/core":"1.0.0-canary-1785-276.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1785-276.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-276.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-A525xBwvo6VF5womhF4CXBH0IS6qR0CWScBGEyZLCnu2D05A/lPF9BwbrXM30UB0J9WOyt1+Mhq60kCfS1JaZA==","shasum":"0e41a9707a4cb86eefa562a7278e76ef2d12c4a5","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-276.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+gMt3B1bafvyrHHGDw9nWoojcuf/5SzDgzE4qbRweeAiEAj6JeZxQksYTWvU2UFuuiwlmm3TFtEJHiv5B3zY2ybwE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBk6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI7w//bkdKQ+vI7UXlVW++gVwclQf8Al6r3iXQg6DzitXYki+Hhf+b\r\nmugf2fhSj0lcUeTg7WRDRP3CzGuhHprWbP6yF/f93pFWb9eOg7GuuaOb1nHe\r\nbVx0I16oGHMOf/JHBrELwbaccM1IfgORfyMlA3k5vKpY3+RUr3DpXDdS+Wl1\r\naBwFreUK0W3fQV17NwDqJAYdDSTglTDZwReKzKhkNpbqGSmlusu2prX1fkfT\r\n1i9NC4yPWn3m2pU35GJYKeNiJb/axYAladpS1Djz/cKyjEb/tjwPBDfVNNMx\r\n5LTiYcKuwtI7aqN6UPucVkgJMHcbu/ZI547D3e9r1DzkY3xmz6AwwtuYGppi\r\nQvMWVDeKFFakaTkDLSek7R263VSfU0Yz4PvtuVh2g1rPMQnUS9Y49jN4VRm/\r\nQBnNm4RmbQJZRGrW6A8HcOV6H7AChcc6ozjPNY5j0DGUZz70pJ7iHzC2/5L4\r\nHfB4KDxGrgixPeV/zqWfEKXm4igpC+CVumX9yKC+m+CADulXkugI2gVwotHz\r\npx/4sf+LGY+CqPBoB0MIIhw44qWvfl23bjufAQsU+w0j/xxXYFORAfGcyUvI\r\niPdiCUKxkYEcuaqQ0UAfpO+ky+rnzkJgFpP3YoGaceguZwNvxF7jnn7TRsNo\r\nMwOhHpFLwD8eUjs1IhnF9tPBnpMMBAaCj8Y=\r\n=IyRx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-276.0_1653086522554_0.7126562598595587"},"_hasShrinkwrap":false},"1.0.0-canary-1785-277.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-277.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-277.0+4a435fb","@bodiless/components":"1.0.0-canary-1785-277.0+4a435fb","@bodiless/core":"1.0.0-canary-1785-277.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1785-277.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-277.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-GhJrmfUiEUXYx6WT6AXQMH5w/BBh6Ewc/s7+xYexwqai5Zd3GBAd3WmZCmIm3r+jGpxXXdusUU6ArElVVjyl/g==","shasum":"f9655332b7b432b8e6fde9bd31fdfb1d97f605a9","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-277.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIElDwQqtv2T+18DeuXgOWzwjhiP46oyVOUmyDGz2Tc9yAiEAmrIb5KmXYMkXhVrDEMlbpw0bCcIeJfxshqJpGRpPkfw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiB+NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9EBAAkQqnWeNER5FXwuc3fSgEPaYDJe+QBjn3d380AkOTv7elMBYx\r\n8Tw/FDh83ULOBIvAqGUQPlxnYCDCC2qMOV7bYKOxpnoc47Or8fTimqYiA5PQ\r\nYjKZFpkSwUquci6rKgmx0xHJh5lE5P81XG+ihgopWvOoQOY3wr/vRKRMpwxU\r\nJaCzZwFbVTzchceemw4dbrOryZEDpfsJ3mX/5K4BIWZWEDq045W981MfgXyT\r\n3wQ0ABnrdNFe0LPaEHKgy244jDDOTBVb+KfT8+2b2Dr9k+rltO0VdOcqCw3K\r\nlP3uS670EOeFKxoeWtb2Nq054AHoBxc43x+W8xKFLD7mE9Eil9BTm4nV6GDB\r\nmwQT7C6iwLkiPZvlWlL+necteo3LnX/JfH5fFvVaShIgub98wx57VnO/WCMV\r\nSGe6RyN9+2cpHUJUD9q8aSHA2ETMDerI4y2T+GywKLftyd6Ym4Wt9jHUjgUm\r\nqJwedZ516WmHUD7iHIh31cyKROkc42PdVSnwaOJBtAMRb6wglnYke5V4RAN9\r\n4dBGyOD1iJOJycKWMIc+7J2Xs7MDriZauwHquryJU3fFVupOMwX5BzGDoPlp\r\noJkoYD5hGH9nMTJgcsqnjQJF4bIXti96l2cwgNCEvzCRycMOhgwaHqTWIcHv\r\nmV+NnYdL/1aH7lT+Is+hZwybeED0EmpfljI=\r\n=4n9I\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-277.0_1653088141576_0.8716491821343322"},"_hasShrinkwrap":false},"1.0.0-canary-1787-278.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-278.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-278.0+4a435fb","@bodiless/components":"1.0.0-canary-1787-278.0+4a435fb","@bodiless/core":"1.0.0-canary-1787-278.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1787-278.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-278.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-hw+aqqNQuNibvkDkTqc8upDYU5hEg0bapSA+3y5K6uSZSVr0G40+9FGx2UMzP0zgYW1ezNMlUPdqK7q6gd7SBw==","shasum":"632fcab5c0c62694fce971bb07ecd1b7a338e6df","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-278.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq3Ki4Rv2OndNiwM4VH5iLc+H/KLY4AAe8ejt82WH93AIgFIII8zpAFrdmvyagp9lJqELlWqVzCWr8bYk3LgVRbSs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiB+kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZtA//d+3ubnB5gHOCQEqXoeKm7IpS8NjDPtqk7LOVFwSSZ8A3e74M\r\nJvZ0U4FZvwvLFJ/cikidV7rZxbdYdK85tBSFUfsXGOOkDbbOnc4RFOkiTtIG\r\nt7o08ZENJSrhL18vSdNLXeII/XCEO1XU6mSnGgp7+NnPq5lFmF3DKHCXDNc6\r\nJTLWOKaAiHO+bs/1NUpmCiJXiE6UjInEYuHdrdeKF443hMRj7GW1m4rrWyNU\r\nNNI8h9Og/EKl0XnO958QX1AIbVigIULf+A3b3sl4YqWz3yjP4m3ezRK2RLFp\r\nSZ0jklZjgAdd2nnB4O4QuIoOhYJyIxRPuS11mvkT/rlejblW7MLlSbTmTJGf\r\nqW+UCLDl2unYeSoP4O68PdjvJTf1MdShecY51DkF+7L33GnGTx85XvKfA/UV\r\ntFOySCx+hvjMqg63yOgHYUPixoK2WHuRDHujiP5fFMZqHSWQqkroKAliSC93\r\nE6LpJ5c3sGFhYbdXHLyyvGz9bcC/0MAB+m1T5mq4utF36JjRY3TfNiZwx3u1\r\nFvNI12CycoNnRdS2HBSksar9BhSncjkuRnC7FLLlWJpgEWuJA0Bl69kGnPVB\r\nSucxK+zP5+TcEVWumV8P+JJ+582ACgJepBR3SYliGYdBkFLL8wBOa8cyzjZG\r\naD+wQETooztPl9QffaTSdfDz0lDaH9kpp0Q=\r\n=Hk9E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-278.0_1653088164052_0.2581436427951671"},"_hasShrinkwrap":false},"1.0.0-canary-1787-279.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-279.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-279.0+4a435fb","@bodiless/components":"1.0.0-canary-1787-279.0+4a435fb","@bodiless/core":"1.0.0-canary-1787-279.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1787-279.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-279.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-XfQfNSOIq5pdWzVO4a56wsbqByv/iLj9aDCrwM4935K6dWytM9p4N7QCL7Vio4aTWjl/d/bYUagjCm/ZOy8OUQ==","shasum":"74a2f69b68c6ab5d65ac9c97c8e129b798d26b8e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-279.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/te70wR093N29LEsoWqaoQ7Ky1mXPyBv5YRnxQTx48AiBQaHLYNrAtm1RVlZ3WRrkb9hCmxfxPZuOMzNku496mbg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiCToACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSlg/+O/Sd9EjFuqmDA3mMiM/qEwlEldIHVmMpZCabYCLMUkjRv1e8\r\nsXo+Ll4y6wmCcACNgTv1ZFzAcXO74CHAf4XzT/op1QhYZAbrCpstvX9FRXPO\r\njOPivLcuaIRdCRY9eVzNKqKe2zDA/U+X1gCiTTdfsp5pOf2DKhtvsC1xIhE/\r\nvScnH3xF8RfkkvRt6eb2GdsM7XtRRjLbGTFPklgFO8pzITd/U1S+6mI6L5tX\r\neuJnL6odE09qc/9fQL5YbmfV8Xsvnry/LzZxPiP75I8nxYgFkTg3cZkctZjG\r\nnqhj+1TgPNyxSKWXEfrpLIDezR9cBOgKoqfP6GwOM+2BUcHT0fljnpWf8feD\r\nHSHRQ4ifMJeZi1Oe4CQNNBazFYRXFerffyIaFzWcXvcfbvf8uC9YcvtO8k65\r\nFp5sGwIxwRaUHRBSXIbsJt0pIk1KTmwJ/dTzrKICbVU/VTX1fORadZr6g7Ax\r\nV2qAKYxO5147xkzgMjyao7LX8v1dG7MsNPx+7uGLuMGaNglCIJydf9LMNqSC\r\n237wLR9W33A10EitQWunUgzZxLcLbE4WvC6mL8HDrqTdlY20OJbMJYes3iMu\r\nSOMqx7n3XPHrxwWE0f4CRC/0acr4RShgmfBk9wVUoIw5rrodWYL/Fo0170zp\r\nXzpKOevF+6cQx1loG4Efavw/llpgyVeMq6M=\r\n=+h57\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-279.0_1653089511949_0.4649694455898723"},"_hasShrinkwrap":false},"1.0.0-canary-1785-280.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-280.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-280.0+4a435fb","@bodiless/components":"1.0.0-canary-1785-280.0+4a435fb","@bodiless/core":"1.0.0-canary-1785-280.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1785-280.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-280.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-gb5UZJ9eB7688in8qVmgN33qB70pyOtkH3ijOakstAd5RAnPXEo5u8vEJ6fdHhRvsAHwgj+1dlQ/7NwEs0kLNw==","shasum":"4092563ca655b1fa158dc794c8033b5e4c403b59","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-280.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9a7L8LtlOrX6mVg2YMu+ioViQDlSZo0cvrl5yyv2rSQIgFghbaqjLCrwGhlPo4yCC2M9ASX5m/enzPfIH4x2dIUQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiCiAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqS5w/9EaSoE+QdpGOKOrjZ5lMr/Tg5JsgbSbS4xn+OULp5bGOF2q4S\r\nLBHMyqxJoS85YkxIvBUGNwC18m+5Ch60c0PfuxXHjbbjJDyT40y/Aatn/DZw\r\n7mCB2Rx1plXCtmEzr7nKkv+Ky/Gn5uMlEGXpZhkrPYknJfi5HLNBx3CJC7Gg\r\n59m1mE8sXqe45Nx2gRBT5vhd+svt7997LUhAETsr/xqRafC8PRC51zlennJr\r\nuke58V4AHvRdXcq8zgKTIBGoz2jhWPwyNTGfBXJ/nn5+g/20nL61sJz0rqEQ\r\nTMs8VMNUqhEtH6SdU3P/icrxyUZry7nPjXj0PST+rgV1fZtQNsuPGrwNfye4\r\nbDf1QfRc/x02srMGSoEEA7IaRtre4F46xr1vyOODan97U7Hh8OuoqekJovsS\r\nbTKJA0L8NIwjax9bHqy0UToQWFC6hSmTbRpcUE83pmp3TI8J0flLK8YcZRhJ\r\nJxc8lm4yCKV6wJ8wM/3b0sssLxZ5EXA0GQaWovPKo5lCbJV8sMi6lGG03c4B\r\nExzVuQbZXz9RGtg8FJdsOd484b/WOTojxmQDoVI7v0+IUitQlMHk8LFQ4q9U\r\nAne9MG7KuV/o3KCQtY+nZKMXKdXn4AGk886Zar60cZ8C1FPKag/W4/it/Lk3\r\nQ4w42/CgGZvDi29AT80qktD19VwDfuaU/ZE=\r\n=xlL5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-280.0_1653090432206_0.032855966264371705"},"_hasShrinkwrap":false},"1.0.0-canary-1785-281.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1785-281.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1785-281.0+4a435fb","@bodiless/components":"1.0.0-canary-1785-281.0+4a435fb","@bodiless/core":"1.0.0-canary-1785-281.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1785-281.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1785-281.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-FNRG7q7mNq+K/exYgMA1zAlBImxHjsMBlTs8OAL+K/7OYdqdHVpBtz/+RIYCrGTaRxSqFR9Lf5NQWbvsYYjYaA==","shasum":"8993ea498aa7d816ec74e884a0b189628be6b0bd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1785-281.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5ZxgpB1ElK2W3y79I3FsKy5XHxcnq8LPRebpjRXlkfAiEA9HZCBG4CQyFEyGlu6o903jzZoMHg2jCQgvxBMle4iL8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiDzBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtgA/+M5UPDjVOzwKUuO15zRSLDwgQcABb1F1kgq6rWGWIAHpEJzbE\r\nvyKms07N1oxuTbgtScEkur/MaNZrpAW+a264cqZkHZNCkHVd/2EE9KCC+9dj\r\nl2YiExXIy2uJhzy1S0BTa1uWsy5PAXTSN17Pe37hSoThrdC/koY5j8JKdjGc\r\n+0TS32u7Lzx0PXwL2CiibEDzUvRe1efApoiJNS/+pnfQF5nt2ES6xA/c+cYa\r\nn4wrpePKUjRym3M4Aq8J3YFTCGcMf6P7KJyLlRY3GuWF/FHyJTpWpvCrKAgN\r\nxV3TIdiNEuCVesZElQSd5DU2qNJyedHa5/bI7Us3e5yudkXHyqYo9wRknOAA\r\nK4edGQ2JWFgQTQUGTTrdFxfR4Qv2sqLHcaiwKpJWYzmDUElN/K4VAqDsAixS\r\n8MgxCPwZE+ng6uV9TvWQMDs2LU7Yq6c3iyIY7Jc3sxIAiQN7q3xB0LzyJXMR\r\nSCdHZ8WlSNoHmUGXzEQvSEsW/UKyTO/4hc4iSXlsuZ+/dzBsrhhgfn+XRh+w\r\n+8puWFHTAO+7FDsrUDbA/6NheMiEfEb+buRw89IVSDhIwAr3HM0aCQGgffGJ\r\nddUC81O441YS4vXhnkl/V+4BXhmrYg59Fr5nHh7iG815nMBHR5/9O1hOwU7t\r\nzRvXHyjPx/GtRq2zLsEGZjDuXelDCGprNYo=\r\n=zmf6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1785-281.0_1653095617335_0.10099592211170005"},"_hasShrinkwrap":false},"1.0.0-canary-1794-282.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1794-282.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1794-282.0+4a435fb","@bodiless/components":"1.0.0-canary-1794-282.0+4a435fb","@bodiless/core":"1.0.0-canary-1794-282.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1794-282.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1794-282.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-eGAqv2Hr552bpvTpYqfv4xXSglJOXIbknfr1iR7CURrDUsIbwNG8ItB88f8HYTPOs15hI/uLiy4ug+khN8CAKQ==","shasum":"b8d6d6065ccfaaa2c8f64f0bff3572c51fe95ae6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1794-282.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiVfvWIh5+gSQts0rcDjof+8VkJmRMZZQnrQVAB4e5KAIhAPB0I02nCykDc4HnSxgoYfNVk+mz2rxpUPYuzyEbSktN"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiihZBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdNxAAmH+2H8rWRkWicxa52QELIGaN+nl6EJYyXYz3F+yoGDglQkan\r\nAxk5DbaalEJ7fHwZarPrFjbxWWpTBPdS9Xz2j+h2e/LuN1B/LlH8R2GRq8ky\r\nnA2uUfW+S9U0YgbPDA/R+4I1EGCd+Qwp5U/XAJQ78FTNHAietTrWQx10fgX1\r\nXy7zdTyNmzvZvir0jkinKPJ/h6xZ+7RC8JSxj9QKXu35ZNuOAfRdTLNl4MR0\r\nGIJ4st6Dxp3E10XXoz+8G8ocHSNp4tQY978VkgT5nDNPw6vRy3xEyUnMQZTo\r\n3HoAxUQj6xUBww84IiIGy60AWj6P+wHs0J+XfP65POPdNBAmfFeb6zZbj/VZ\r\nHHkohhBsPj7B0NkMeyO5mlVgsw/Y03OMkmdWQGQCxH9WvGFKx+ZFUVRjOW51\r\nuitlXjLNIe21w3rL/+29LHIbWpXVAAvMneRNZhV2JwPuX4biki0JI2kEpgrD\r\nDGyyFbHxhD0YuRwMbrtV3hKzZEQTw85tuL3lTTSfycdfkv2HOYpW25N+eHmL\r\nA6Zpw8S5elvHO8bvWDUABq87tdBF5ZnhDSDW1jd+ckJIRVagJ2TPC1iNFiBl\r\nJ59AQlKuwzZiblSz4ARlzEwCgvJdiXLHBKlrDI6nEgrmV41Opy/cfg0KOIkY\r\nPAOvaOgWcVoIqjPwinCq5XniLhJXrN2FISI=\r\n=iHj9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1794-282.0_1653216833330_0.9741894413578189"},"_hasShrinkwrap":false},"1.0.0-canary-1787-283.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-283.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-283.0+4a435fb","@bodiless/components":"1.0.0-canary-1787-283.0+4a435fb","@bodiless/core":"1.0.0-canary-1787-283.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1787-283.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-283.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-b0e2zItykRPO29ZfYcrliwZbIKTLf+GQ9tTZSAUShfylGGr3QPolzswu13StbBZFtUPXkRGemi2Fk9WlUE95CA==","shasum":"2a5ee80389d65973bd6ec604d4eef8591c60a93a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-283.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPfHQnMYnDCSetvxQEzM2kTJTHcfbLEI9P6O68FCdKrAiEA/JCcR2EtV6m6zxx6FUj4wfBnibT46R3V6fwCrk45lsQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiihywACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5tw//Zf7TX1y6cGLxNx07CXGcHBbkXQmXcSdHnLzJOqo6DjExT40D\r\nkt4FBVwiqWknMj3MH8FdAcLrbQkMJjqKDhYFRGpGaR+gQxcr3ArBCmfPOoDR\r\nt6Hdl6InxNpSuMU9g8i5XXnw2q1WiYujXc8aH/JWjstrx/VHUrxhf5ldP/aq\r\nwfScyMldDnCLw3RdiE5QkgprYTNDxOf4enWwqAYoup+vO2VcmN3+9pVFy/3J\r\nyIIgDE/GvQYFZxTd+aAguq7vEU83yQgy0+Em66+nNJw7K0mbjWFwhWwr0oqU\r\n7KaKoShuJjKN3dwAUpahP+W078jh4SjZITIoe98lP91f6sjol6BWpy/urSPJ\r\n5SJNu5/82d0jCcCd6pmuTyxSLb06sPIMzR5cQ/58g4NzB6L/VZzpnsLLcH/C\r\nUoLf6PxLFx4aE05ZDllJ8vPr5smDJ49AcBIR8uExMLyPC6nl3vXTvUWZ6Kry\r\n2Axg/XISRxGCl4rfU96CGee2ZrKLbaaui1Jwz7PsFE5S6lLFbzx4NFVquu6U\r\nL3EuOsZJ6/24GFay9+4VfMkrXJTuLJgkh28zrYySYwqX9pwhw2c0MxYnTUMl\r\nXpx92Z941RtHkblvitRG9pJKhkSEaaA//CwmZcoAzMTEIuBWJyqfKIWnG7nx\r\nWsFZ/yzNHXGAtTSf0SNggYEMjWakFCXTh20=\r\n=8+Yt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-283.0_1653218479872_0.0787347237074898"},"_hasShrinkwrap":false},"1.0.0-canary-1800-284.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1800-284.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1800-284.0+4a435fb","@bodiless/components":"1.0.0-canary-1800-284.0+4a435fb","@bodiless/core":"1.0.0-canary-1800-284.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1800-284.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1800-284.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-LkFmwD6eD+QEtOO0ZzC1whwIJWXOYlD+aE2d6joJ/NjbnDVd/JMJS5zvdqnsYrtJ8Uzdi3b0WCMnr3SpmmoaDw==","shasum":"17a651fe197dee2a4b48ac08236e546b4c414f93","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1800-284.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBjyF46w291NdNTHvhchu/h3/h+QJXpNDfZylOaOnSe3AiEA49tTczPrthStxWS+Sa86G3F4OsvsXb/a5HKecgR9i4E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiij5hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdEhAAoIoyKDNyTXHYA6QJORxcloOBoOEuPAs/kxZJN0zs47xeHkmV\r\nASiFoWJBKFQHi/Y2JEszScftTMLjLAddnK8rDUaOyjXxYUHKmKWeyIcB1lRs\r\nvYgYUqVpdc5Uyg9JtS1u8SbNky2jC+5KErNOskgLw/HmGnDKGWiAf6qYr9zW\r\nOeyOBEVTiARuQpicAxN6bcWUCMLYWA54ZssyIiZOGLVg13z9bKeyGqBoLjWx\r\ntK5x7DGRQH7wKrWf59HQRrnur4cx1Z/qJvXEpPU4n14Y7e9XHuH1FrDU4mJK\r\np+AuRk/MNGqQhj7IMv49GynC7qzcPYRnkYAFStDhsndsHvZYCoafm565oMxA\r\n0PWTgy0KazzET4n1iVkNk9hoJ4Fa7BEw0M2UNVs4I1Z2jgds+KIBN1+QspzG\r\nrTV0RZKvKGcRnzMcX1Rbs1JOUKf84dp3WNsp7P1ljJOIbR+A7dKzA4xBjg4E\r\nmSeSx6zwoWKoF+i6deRNtI1JDM9lVLpnPbxOKVAkFUMG2FdDeHKpd7E8kSEV\r\n3gCbvOWgO3O5hybxD8Nx6k/lWvpJlhYhwFgNDGFIGAJqNxO/102YCmPcmU+X\r\nNtOPrWUrDKubcPYZPF6PvtjESxpob2Y9fq3OY+3r8RNkqhCYFtYgxx+27MV4\r\nemtdZffjPY0+IEmiPC2A1RshHKN3Xqn37g8=\r\n=TE9Q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1800-284.0_1653227105620_0.2679788621984087"},"_hasShrinkwrap":false},"1.0.0-canary-1487-285.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-285.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-285.0+4a435fb","@bodiless/components":"1.0.0-canary-1487-285.0+4a435fb","@bodiless/core":"1.0.0-canary-1487-285.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1487-285.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-285.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pkKvVpTsVbiBReWkQFZdn90w+7sttRxgqkhBPhfWpe+/oTDGqOUxmeS9FglAIe5Y2CJrSnYNQ/tFtejujUIHSA==","shasum":"1ace1ae084b081bbb85bf1be57416c606e6da93d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-285.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClXo4VAg7t7X6YuDmNzvEyDp+NdJBvpV7zn5KCP6a0YwIgRiD3AGltsvosVF6eRoofqZS/7SZgP3rakK5SCbdgz+g="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii21YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFqRAAi+N5Mbwt+Ku1gW5gN3IvM9O7tumgohMeoWAYbU/fe3sCjgnF\r\nXMHm8xu2lRasTfg4fd/ghSmP47JdHtPi21eh+jcL80kTSx5oG48OiQ9bVdRL\r\niQscaO2GNCL341XUXyncq4hztQqXGqYq/ZCQAdbx73UU3J8/bElzkftY76MS\r\nRCa5ePeAGkz9ApoCOtl6Eg0yUNFM/m1bk6OambZ0STsew7yvbEL7sbAGc/G2\r\ngdy5jh1sLgS0EsrPyxRu1peWLc68cx/SCvzlsKDH+msj6dueQx//Uhs8WKAK\r\nmFkMgCOxRDQzJudeI5VMPTlOq507/MQpUcAQzIuVXRzgmoUTUKdIex5ERb4g\r\n9vEp8s3UB46/aOrjcyzR4Qi5/rMiXGti8yN3iKHmrbVmrnzHKj4Zu1Bna74M\r\nKJMZEANgkQivJ/UhGPf+ytByk2f+ntVeezoqiMrQ170Hrpjc4rvsYKmuA9+6\r\n/7AFHKs3ltH5a7slNH5Sl0XPkl3mSHM0IxzXwfF3OfsqGFGb99yilIhfeX4U\r\nM1qbBiGcwMVhLUJcvRjypKQ/4tMv3v3RW8Q3J8e7wmenFKSnK5QVK/J/kL3b\r\nmeVAp9VegsrIY7BLkYw52v/kEZIfwDrA4XnWGt7lDnVwVxLzyRaPSrp4oivu\r\n2ZaEycFH9ejXw+meErdVb4LTU1mazerpWMs=\r\n=6tWw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-285.0_1653304663916_0.9059504366937952"},"_hasShrinkwrap":false},"1.0.0-canary-1487-286.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-286.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-286.0+4a435fb","@bodiless/components":"1.0.0-canary-1487-286.0+4a435fb","@bodiless/core":"1.0.0-canary-1487-286.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1487-286.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-286.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-l+9408GFFDASxOWmTCEHHVKc6Mbw7k6DrqqkFEhmtoyGMSdiTcv7jEkTTDJAguw9D86G1U4JT4MsjiXJVoy5YA==","shasum":"bb41b09897b36c949b799804597be599383b3d51","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-286.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEri66isfx1zCrsH6yOUnWsAwaLW+nAfvrIpmTfgKKqsAiEAnwRr4JcMYnIusugWfsRZOC2cEGZDRLcDvbQUKxEYoxU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii3E8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5mxAAixgjIq7cP3sfVTyaB3EdW7Ri/uXt1RkZf1817o92xDeQ1dXt\r\nd5cPcO5iaftHm8MSYmNPZ0Fg2HAAyCgGzOwEOdJlO0BJFs5TC2J2S3a2hGoT\r\nuwKEMubhUikgvuWuKeDIEnxNOSHX/6LYY/QV+blUjEMvd2dkpssP+S1yy32J\r\naR5YoIrUH4VzTtyvzovNGvLXepy1My6BwRTkbQ/QxvVR9DyoQoEiF7GMf1EC\r\nHt5sciF7649hCqwmKi9FDcA1i5S6aRcZaiAsh3Qvk1KlyVZsNMPt7P+++OEg\r\nPwJnhsJKInRWLVyKuYZqtq4gRCQ11KiBzDMaoTEPQ15f8FGPElFVVTJ5WcNI\r\n+d0ZFjKNAxFORlfD+jTNwzsTHsZGl2byCnSOQE+FfQWq+O1xCRP6ZLX2BX/g\r\ndg6sqBFFtMnA5TMQLZDNHH3tdIWtR6Jhxz3dQpGpx9AD7rCYKYgvrZhNijib\r\nk3ffFKToi7kNFAn/R85uCD5oqDb6Wj4tfKdbQUH65WEEjjkAAEYmOOjlyzCR\r\nvpq+ooFM5BWODGtg/18bnNPjyIPpIhFqgG9Q+0xBTBjKYPFtqHfuTHb9pH69\r\npyK38X99LFPrsndtDSqCnDzEu+EJibdLfc63Zv9Tx5524MDKkR6OnQAewKtb\r\nibND10HS1c9xO/fMSaTgmkbsXm8sR+LiD/U=\r\n=vy4s\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-286.0_1653305659851_0.3068897383146776"},"_hasShrinkwrap":false},"1.0.0-canary-1801-287.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1801-287.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1801-287.0+4a435fb","@bodiless/components":"1.0.0-canary-1801-287.0+4a435fb","@bodiless/core":"1.0.0-canary-1801-287.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1801-287.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1801-287.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-vsOpg/Yz6kE87RJl2OJHm2DLOmaooVv05+YxgIU4yXPF8bye9pgpWAMwoAbB+IRUsK54r173WBgBBd6VyoCVHg==","shasum":"4b16bb67932acb46f3b9fe750ad9a65be5ab7e8e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1801-287.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6dhQPPiaPISBES4LZ5yxPepH+YcphPy1Vv6haaD8BygIhAJ3tsfcGMCrP5p0ACpX03kOjcM2O0lbKT29TmvVNaBZX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii4OWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9sg//V+62MzJlCKqqiPEZVybxT1ygjfez+kCI00e5WJsvTnuNEFnp\r\ne/JSrRP7zk/5CcbMmK+2LO1C48SAVRQde4j/y5AE9QgHW22gTj23kTS4nWwv\r\nnWtKeqH5E/s6vlwR512dRi531OZ4emXwufnOPmXapshVF2404o3iXJLO53S0\r\n5shNii3aeu7d3uNJX/JH8LZUlIrU8qiKgne0Saa1jYnn+vPd4SRJKViRbdVn\r\n7879eRyJPxuyQMzYtC0Rr3FajJo9rWMqn/4VBx4n6BzHOmUfnsBQm9pyc0wa\r\nvTj7d8XEdTHzGN/jgJ8LPM04AmEAAXGS7sEHn2758c6YdSUgGenaG0LsIC24\r\nyynA0U/BoERA0VPu6e7Un2qU13PiCtz3C0ktTkjgNW08f9g9bAQuPtBNXkMA\r\nnSTl4iEmNpkiOa0vJezPRdvD8cEqqGuhYfCz9vgf+bRgsfnKxMMAMtzvw1fs\r\nNRYA1ZNB34Ucin9cMZwnoKftvilFAE1VQsqxziRB0/O+Xk2TKUrZ10v/Xc62\r\nklDqXDqmnhz/1AfLPHag0YnWZgQg6twpiW2Tmr1xubYAHlAY9Emb4h1St7US\r\nzV+qp5mDgiXUqG0vXbIhbWDsj0c674U+L4e0OExwR2cWU9HJX2i87H4NrZ6a\r\n4IArCoYze0jCDzYc9W/oQtNC1VTbdxC7zVw=\r\n=MZzT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1801-287.0_1653310358768_0.11044702004487106"},"_hasShrinkwrap":false},"1.0.0-canary-1784-288.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1784-288.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1784-288.0+4a435fb","@bodiless/components":"1.0.0-canary-1784-288.0+4a435fb","@bodiless/core":"1.0.0-canary-1784-288.0+4a435fb","@bodiless/fclasses":"1.0.0-canary-1784-288.0+4a435fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4a435fbbb4e10b36c80f22e4b869eced35204b45","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1784-288.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-r/aUPME8DjbWjlVXKFBOA4pmZ54XHETZbD2fO9Ho9t2OveRPhjhAM6FrcxkVfZhuxiHv9tGRyusybWAIVtYBvA==","shasum":"68c60d77ef20d989ab351decb22019d500b72abe","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1784-288.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrb7+FAjkZuTiWFmvm2z9gxzSFCIDVI8IQQvPI/shGHAIhANe1MalIALA2JySr0mNvNhkPDjVbSsujT4N2cRssCaRR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii4rfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpyfw/+PD52SrfOVe/F9AjWHNKbvdvJth+F6+BGP2RDL1Nn7GRD9X+T\r\nrbP/kL9prurJozcisCs1Ew7MLlWqjkG7Wi2gEQBu2cj+qymmQc2AUxWL9whg\r\nRjXJd//Qq060xB2FX6YutfeMTc4mlatQaVbb4Xva52EMb3Xus3ISH5rquChx\r\nTLoN9XJ1qJpANOe3Hg0x54s0uxIAoQzvJewuS4KO4kaXo/m1rwIwfqFjcN4z\r\n7fBhzPH5ZRAhBdhUUjMihGjv5lDLtRIJ97iB3ggalsE71Fn8dn7zVG95oiMw\r\nLy6iXQ9kCiegxZxOCTdCcLFvWfa/6flFwCdxaj5c10OjmLzJPm/xQ46Mu8c/\r\nPjxoYxEmAvTzt52olNhSVfNPC/8A8ytr289Cesxk7ixpu7XAhehRe2BPTxxi\r\nrTdBUjVVDRuS5GXxeCeUSSOMYWgTyRZqquDhXdqMTk2g3vtVG+5OlPNbnxbN\r\nHkhSKY5gXcNRvp9iKOertd1EdotFtO2oF6IwS+OjQNtpd/HOeR+gv8hnajU5\r\n8BFesLC4lIQ7zBAWF2fL2Rn5ebKLv3Qzl9PJ76Joos8ZolxP8G7b+vsuHLBx\r\n5vKFQcQ5hIZy/OIukNzumX/8gHS19J6yt0fnW4qVhp24G4U2agx0FfvrkhNt\r\neyx2KQF83pi/ED5iCalhT4C3GGVTbxV3n2E=\r\n=ntT8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1784-288.0_1653312223232_0.22191309998646336"},"_hasShrinkwrap":false},"1.0.0-canary-1784-290.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1784-290.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1784-290.0+fc6cca5","@bodiless/components":"1.0.0-canary-1784-290.0+fc6cca5","@bodiless/core":"1.0.0-canary-1784-290.0+fc6cca5","@bodiless/fclasses":"1.0.0-canary-1784-290.0+fc6cca5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"fc6cca5dcaac8f50ba8d90a62282a5a9cc8f0cbb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1784-290.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-degoDQ2yGl8SQ9itjEp+rb6HbY+u0C0YKX1b0+rX9ZKkTuA1x4AM4F0Mx4ijBVzmhX3e8SezxgwNvarmOtaXVA==","shasum":"e269c4141b6200a42a87fc1859cec83b28c4f44a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1784-290.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjGWPV8dO+egwRZ0Ts+3Meyga/hyKxr6jz/zO+ZdOegAiBKtFmMEZAaMsd6knHiRlvqczKWQU7cgRXo/YWCJn91JQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii4wPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpytQ//XVgCm66WW1+1xa71ZPy9dnbj8ewD8xun0n7NVxWQzmy/VlTp\r\n70+20KC3TMUD/CDTKFEtj/QdvWZs6xlK6yKxPe4HVqxTy6uJ8e6BGV2ypwSX\r\njONjpKTisZSxT/1GG3INcMeAbK0Lr5dCPPfBVjb+M6gCmvFbvT+ESm3suN/B\r\nx5op5DR9DCiHVkE9JtlFfRoxpFTwzJHFxKmcaLL1OjGBYAhtiG4hd+qo9AcP\r\nbao35GOewdInv57pVAhYNN2P6eJN9zM2tO5+IuyV8gQ4I6GeNyxIk0fhyMI1\r\nDdcdUIWVc2qf2iEfl6xlDrj3YFdNoQtq1BMY6yb4PS+cIitAXhhrWZxBhoO5\r\nF5eYh4tdJOIh+kbkw2JXL5oY757t08stFb98K8HwIqjBR6CgPuK5Fi+SdtAo\r\nzMnAblTEP9/u8Uch68FPr+I+t/w8vXy0C1OKdx4O/c7fDJkNxt5Z4SPAhg+q\r\n/5TFUdnn8IybDJkz4esv7l2xZZ+tAoUpCHS2vKqtUD+OAismhOEHfAY2lhkA\r\nbcrRAsukptjfNHkYf3VAFZuwVssd50M0WgaTMukqlyM2Yxpf8E2zFcnAxbkT\r\nBh/9NNeHEpB0+7M/lJYT0yvFlagWORXotpkUH5t7MUlsaLsmjDP2KDYdLASQ\r\nu42N/Ci+hifsoTYiMjNPVv/bfiPtHElxjI4=\r\n=tsD8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1784-290.0_1653312527586_0.8539550168247114"},"_hasShrinkwrap":false},"1.0.0-canary-1487-289.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1487-289.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1487-289.0+fc6cca5","@bodiless/components":"1.0.0-canary-1487-289.0+fc6cca5","@bodiless/core":"1.0.0-canary-1487-289.0+fc6cca5","@bodiless/fclasses":"1.0.0-canary-1487-289.0+fc6cca5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"fc6cca5dcaac8f50ba8d90a62282a5a9cc8f0cbb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1487-289.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-sGmiAurpcugRwpr8a0NYJWxfemxJ2gOh3kb8VL5TKHDZZcWF3wiYbNdyjf3CJbAXYev/DnbznXRSmKKLYZxJoA==","shasum":"def8e0a32a9d900abf6208cbc74027a2100d7990","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1487-289.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAOi+T70ohgZ9BAmuh4ISwlpTFyBRX6B651Pa/v7AuumAiBmbtWHG5B/UVRceJbMyE4Sd8LrjSU9eaoLf10C9GEXrA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii4wTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDlQ//XIV6VfTWHz2MeGFcOh25rNgR3QDxjJDB6hrWlSWJykeZTRc2\r\nLUvyhhG8twvqBXa9hSkLlJg4hy0ttJN5i/JsJTZHELPvJBVkVdDSnaKH2M+1\r\n/YlT02VQGm4r5pXrVbxtw1FUzwdqVJWkhSoQcf4enwssRpr/TCUHocL06bZi\r\n+fNIpaHgGg+NTU5kICJbo+cXAhQi7iWimMAG/jO6rAakjuqf5wcoXu4xEdaM\r\nZj5Wt+PvhNz7YlO3r6Wb29oKTMug0cvvjmA9PwBDR9A5Z7KZmn374cLA6Vg/\r\nPJx+Dt3FVNyDmG7siSqqZCSqB3f3cATV8JrCefbNF1iKXdUhZ1yRqpFwjqFL\r\nl6R6f6Cv1eJySpjV9pS/RQo+krGJd/Z96Ih+Adm16Yy5qAX/6LmD2UpcuwYf\r\n3diJYV19i8D2YG1pjt2KIebT6DaBH77O50Bi0ZarHPD1yWV7EsLAS8PEAXoN\r\nsBA1VLUyJr2+g69tQyf1GDgY3gt8h5X2FVLeqIOimBBZDKbrVf5K0BYhiDMn\r\nnauzn9LX/TgSaW2YhCu3VUs0scnRn6xa4nimgsdji/C47kgAGKZtPKYSkkUy\r\nfInKVafEZ45GMjIR7+6NPM1D1uzWZu7x9wvhUC2OlRzZfJOjuseyyMTjJUNj\r\n1TFBmWril00UOaMa//e8VyqismoN632JeQ4=\r\n=6XIT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1487-289.0_1653312531215_0.5505537853128146"},"_hasShrinkwrap":false},"1.0.0-canary-1778-291.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1778-291.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1778-291.0+fc6cca5","@bodiless/components":"1.0.0-canary-1778-291.0+fc6cca5","@bodiless/core":"1.0.0-canary-1778-291.0+fc6cca5","@bodiless/fclasses":"1.0.0-canary-1778-291.0+fc6cca5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"fc6cca5dcaac8f50ba8d90a62282a5a9cc8f0cbb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/) on a page via the\nBodilessJS edit interface. The YouTube Component is responsive and features \na 16:9 ratio by default. \n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n---\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the \nBodilessJS edit interface.\n\n?> Please note that the [Embed Component](../../../Components/Embed) must be activated on your site for the YouTube Component to work.\n\n\n``` js\n import { YouTube } from '@bodiless/youtube';\n\n \n ```\n\nYou can also use the HOC version of this which can then be applied to \nother components. But the underlining component must accept the same props\nas an `iframe` tag. Simply pass the node key to the asBodilessYouTube function\nand then use the returned HOC\n\n ``` js\n import { CustomYouTube } from 'my-library';\n import { asBodilessYouTube } from '@bodiless/youtube';\n\n const YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n \n ```\n\nYou can configure YouTube player settings leveraging withYouTubePlayerSettings \nHOC. For example, to configure AutoPlay for the YouTube component:\n\n ``` js\n import { YouTube } from '@bodiless/youtube';\n\n const AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n })(YouTube);\n\n \n ```\n\n### Props\n\n| name | default | description |\n|----------------|-----------|-------------------------------------------------------------------------------------|\n| nodeKey | undefined | Identifies where the component data will be stored. |\n| playerSettings | undefined | YouTube embed player settings. Check YouTubePlayerSettings type from 'Youtube.tsx'. |\n\nIn addition, you can pass `HTMLIFrameElement` props (id, src, width, etc.). Check `HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters \n\nThe YouTube Component utilizes an API that allows you to change the following\nproperties/parameters. You can use defaultPlayerSettings to set parameters that\nare commonly used together. For more details on each individual parameter see [YouTube Player API Reference for iframe Embeds](https://developers.google.com/youtube/iframe_api_reference). \n\n\n| Parameters | Suggested Default | \n| -------- | -------- |\n| autoplay | 0 |\n| cc_lang_pref | no default |\n| cc_load_policy | 0 |\n| controls | 1 |\n| loop | 0 |\n| enablejsapi | 1 |\n| modestbranding | 1 |\n| origin | canonical URL |\n| rel | 0 |\n| mute | |\n| version | |\n| playlist | |\n\n\ne.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n\n```\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```\n\n```\n\n---\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```\n\n```\n\n?> There are optional parameters on the src that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1778-291.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-PXTYQKQKfOFVO6Zx5eVnhoqEm4whlpT4NxEsIlqEtyPcFBe0eJoNqzQWwFSo9lHL6yx6tZtdwnC0p1vVYk640A==","shasum":"a6a19c336c3f9d8eae7fbd08b908cfa77b644b6c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1778-291.0.tgz","fileCount":19,"unpackedSize":216871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEuaLt0lDAQ6Vc0FKJvMgfzCrWeAvsXLXmsXz5hgp4KwIhAOnqp+7dqGS2VeGxPomhOTo87i6PQ8U6E2NSiPQbW/G/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii46nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4Dg/9Hn4DDrBETwJD5n6BoO7YVeSzTmwz6O1/quyugzhCbEHUodLO\r\nHByzJ3/UBe8hhLhenVtQFVLYQ0NxaBFks97t1YVvpKZ92l9xyHSylTrfCw57\r\nBLDoL38f56fhVc+YrV0Qd6DidIyxD0zX/Yhk+ngsUBZLzq1HWa6erSM2NRGn\r\nSGKYyrjDYcgwtDtQMlx8t4vaIzx2+uBP0ZeERjHLhinuQGQCocY43T31atUB\r\nUraOTAPNgx54t/P+YSqLEtwqSbk3KT9NyBteFJ496yWoVS45O/wpI/KBp5cY\r\nR485XilaLCVptqiA3ED9/IjHOcDYrJG31lTEaJCvjz9waq/XVLoIaRvsw1Kv\r\noqGYTEoDHyfviv3Wi2ZVQ2vuwhXqT8rjkoDdZUCDQJhRc/adXO5Q4WRpc+PW\r\nSBjIihPRlEgB9OUg5dncjEoRbwj0XZlxZ/uqFhCxlh6SLUzAAfFUm5zj8O9d\r\nzQ0fctplX8FOkkk6OkoLQcjAA1iLMxfWQOssN3gmJGSFTw7pOQvt9jMKy0I/\r\npxA7o0oeHOcGTBcT/iGhVqPXEWhw7IQwUAkzRCDAiDIyxwZHK9gcsOU6syrP\r\n0hiqM6QgF7QfQ+ydKCdrKDgf9dfQ/oe1zfcAwUDvkxFQVbxCTiAhvAkZvknY\r\nUOz4yFRR/v6ZklFDX63SvFakCjP2SllGwW8=\r\n=gJvT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1778-291.0_1653313191398_0.7000110706627352"},"_hasShrinkwrap":false},"1.0.0-canary-1787-349.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-349.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-349.0+e9dc1e5","@bodiless/components":"1.0.0-canary-1787-349.0+e9dc1e5","@bodiless/core":"1.0.0-canary-1787-349.0+e9dc1e5","@bodiless/fclasses":"1.0.0-canary-1787-349.0+e9dc1e5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e9dc1e55ed6f9d19dfa7d86375efd2b5ce5ca612","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-349.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-abSj5ADBXMKBJn5tC0JvN1VMIbV7GIqnf4c+IFXC4mvH+LimlY68TUsKgcomLgaUgdmiSxe/eLiZjP3ACHdINg==","shasum":"19eb627241a1fefcd24f607089e1ab721a7bc2ac","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-349.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgTWh4R30CmEGg1B2G22O6F8c2Th3sHc+BhRvt7YbD1AIhAPCI3ypidoQA+/rXjFhnKw+QFQOGOh9WS4UV6pbAQAqp"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijTolACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYqA//TiuGTT4Vj65oGj2cKAGyI2Lat+fsdDE/q2wvBynBVIOymkAw\r\n7ZRDxe/l3hxrQmOTGejNrqKdwMgBwCgk5qPVTKc6T8j8FqUpB59sl8joCdpH\r\nGOu9cJGj4vm9zcB9enm1Vy9/l7pMbEbUT3HiEgs8UCiTu8JRwjI13LURsEJy\r\nIfrrfYQRd7vJtOfPAZJckg9zfVIppFEqH5SXRR0d2isetxiRU3Haf9Giysof\r\nhis11ZKf2so7hSOq95e1E/SEgIUy1+i1zii/QaO7C/TLGUZQ8KNFuVGFfYVc\r\nK56Il78vHy1KhUSwhJKIlJ56W9EhiSMbR/GbbTldkS3NzU49Ag63onG20lCi\r\n2714xdpascrOJ5U2zFm+wlYRMarjCP3siF/rmI2uzLVY3QzmxX0q/VORoiHb\r\niOgxpV/fFYA9Om3BmmyCZ0RWT1Hc5GqYgw1gCfnm5R4cSjNIRxKDD0tUr37Q\r\nP63hcolUMjVHHmMH+7xyMv4as9pzEAw+cYS9GHH1R+NIDZIEAmBgOAT78IEw\r\nF/NOe9RVmVDS2MCjnfJLS2WBFO3eYhWqrTmwe5D3/1El0TJIjGAM2/vmCjLE\r\n+flFWaenjrShXQKObD7pOk595vJpZAGtx9cU/UHS3Lhk+j4hlgP3fad/T9nG\r\nCmtP7DcMQ6KA7z2frJLpA8ezHmUxDG9A/5A=\r\n=V5MJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-349.0_1653422629164_0.2693966239664143"},"_hasShrinkwrap":false},"1.0.0-canary-1787-359.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-359.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-359.0+549d657","@bodiless/components":"1.0.0-canary-1787-359.0+549d657","@bodiless/core":"1.0.0-canary-1787-359.0+549d657","@bodiless/fclasses":"1.0.0-canary-1787-359.0+549d657","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"549d65721818554ab60c6f987e913143da763684","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-359.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-sQQq5SBpZXPd1V2vK2pXMXqoKTdTUC3B0RpsFDVjv/sPJRyk9DmnyuYlxyk76WtCYlnPuBGYalbmS0f5z9a1xw==","shasum":"48c2564cd3375a011ef987d32d604a764fa94b96","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-359.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQOz1L/ohC+0ZuVsYSVz4V6XM7yh1Y553xMotGN/GRWAiEA39YCP1qDThTENmDUYPLbJHe3oQPf/079A+e6V082otM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijhWMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBaA/6AmN1b8ComM3FDdd38VvZlDR4A04hSrb2m3HWzC1kRqC7Y58M\r\n8awqpKCP7swV4zgf3vOK8o5cpHsN4wt1S4N9pdlAsndDnYvAUY9nXaFZZnkj\r\nUy26gmAGGOykhBRqJKJ/hoixUbLUcU7wp0M8cH3NqQqcrtXms2e6IWx0s2bi\r\nS2PYCUxQWtHTwb25gXlJz7Mdfs7o2HjFI3MRlWND16WKbnj5dl0gMqogShLx\r\nm8zvX6oUz8XQfsyaVQEGEZ8cIrTVWMpMjmws1mky1YLxaCXslNZKaLZhMlBs\r\ndGEtQsgVd54hJRGv0Sb67pI/s3w2Q36FhQTn13F9jhzQJ0u8EMpamQdxHfZk\r\nRcvgnHKMn/lED2M80t+YJhDURikqRrYrWDFemsFpYDiikCG0Fm++nEfqM1Fa\r\nPIwtJs34mLe8Ea3Rh/O6KK90sQfjYoyFy05dsoHwLL65slpX8mr5s6Z0zjr0\r\n5RMj83mxuiN9un2eb3zY5wbhUUig6o0ZVPvYcWazjbetB8rncHkWskyngQwl\r\nVWFVXU68DDe4G6A6HA01EkOcDTfL1yMw4YuifEAm/ekdljzEzpgZZ8lRI6Ad\r\nhTL/qG9jMXTCJzqfwKSfOgSxyqQVbDg4nznb+LmC9dG7BSYl7JmWBAA/KuTe\r\nb16LXjJmYqMeuM3F+3R6siGgsKI/atsty6M=\r\n=ubca\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-359.0_1653478795771_0.5613733689818408"},"_hasShrinkwrap":false},"1.0.0-canary-1787-385.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-385.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-385.0+ff1f822","@bodiless/components":"1.0.0-canary-1787-385.0+ff1f822","@bodiless/core":"1.0.0-canary-1787-385.0+ff1f822","@bodiless/fclasses":"1.0.0-canary-1787-385.0+ff1f822","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ff1f822f810ca567c9bbde2d71ab7e543e2adfbc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-385.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-mQliSezY00bpziODFXlehejZguBwcfVQxU1jB1FanfCHURMiNavbcUUBbR8eG4rA0C2N0kIGSi076bQ7lHsVEg==","shasum":"f8eec83cd4ba7ddf3f46b8aa965fa9dad22efd28","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-385.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOVEZPTBdLuJjlNOzfbFuiS5gqdD8hirko7oTRu3jMogIhAPuJF/mtuwGuggR6gQ/7F1MjbaA3r9cVxdGr/4fzuaaX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijphqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5MBAAhbCJgtIzof9Cv6FM4rbEp2wPqNwhZjvx85zdQkSpVvUyElmt\r\nnCmvHP6wn0jyCHayCyIA3EEl7Eq3PYCA1l/0zCq3M43cNcCROP3U5ei7ZTzD\r\n3sEjGM7axkm1RTdn0mNzKQ57o/qftHmWlsgE9evKFXUuMv0G4NnlBasoEXth\r\ncGj0fahJfLyi/jCZnTZjoOTbB7BpFbDcOwHL8K2ByB83Q6OYSDMxKunVNOZ8\r\nFn2kPUJUDjNthF/gaBvrfcHmj53wHxZdgFY/CUgs+BICTx+mlZ18J+uTTxwa\r\n+7mYL1RKQjOdwnRRRELgE88AYIwv58DMIDqWp5jIf83aa6smVNIlXiEu4nzu\r\nyd934o+73oGsdPkhk7Svu97YUReBJrx225bZj5NF2yNK54M/JKrrdoq2sJBU\r\nkfsUUzK7f3x/fHZ9kyfVnoME7/2Bj01QoJNVXJSIrKiSPJOrEPtDaZDRVchn\r\nSSoP/bzFMcN0HwRTazZVNj3QnO2ebPkb2dEH8XMVsEEpAHSgWBUOw0eSkS8k\r\naSfjEuaGZn0E+QmFwuTJjwD1fz+LND0aFlCXmeNa8Ik0e8yxnKDIspfiqROb\r\nX15jBbX5oCTTiGGvJyNc7QBrndCXc2FsRoAx6bqp2hzbxV/07KkrzBjmEOf5\r\n+HYNbUyXx7IyOaWiOTPwvTmKAZtuLOSZh/c=\r\n=sPYH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-385.0_1653512298315_0.8428352691566876"},"_hasShrinkwrap":false},"1.0.0-canary-1787-386.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-386.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-386.0+3bb3670","@bodiless/components":"1.0.0-canary-1787-386.0+3bb3670","@bodiless/core":"1.0.0-canary-1787-386.0+3bb3670","@bodiless/fclasses":"1.0.0-canary-1787-386.0+3bb3670","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3bb36700f87a4440be23ab04cce5fa20207dc6c1","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-386.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-lN28KGhoMyY6zhrYbzKCucgrFyhDC0SfanpjG487ywp3mEeFNTrAd5lcYzhfTAGXwPZ24ye+FWMZSjwHjujM0A==","shasum":"d8e65be1b6c63fb87a32c58394e234661ea872fb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-386.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLfP759z0M6NDRQpNbJrC+Qorn7Uf4XUdxuW6gRuGa2AiEA0Nq8HxAijH/ChzXofgWWXWts4+cuJc+MXCL/hjGBjEI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijqVeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHdA//SfmvmOFHHZPSQ0u/IIFPqDaXVr3SHt+spO2qNw0eeElDAl4H\r\nCkUqdQeQSPEQFyx2e0W5YTjWUvROHKTqjtAE+yA+iibpoSWJqfCqXyz/11xP\r\nLdYG6KXO+1L0MXfh/ZudVq+D6xq4chVAnSGBZ9vt0JGNt3WMHhBaBDHu2R9S\r\nGPfu4Qdvv1k+xZEQMYm6K4IWAFsFdjcBoekKsP8wniGgcK6UGdjk0BHne1FU\r\nKnjdf7kAWUkoA8cqUrnJcuqyaZyswDJPUmJaa3Xj0kxiPv3vjzqahwBWznN5\r\nfBKK+Xekld9b7O/MDSxKL00nU1WFCjB0tXBT/dgJEQgP+/fHJaei549cEgnY\r\nYtS8rcf8UrmFt7W7EKjovfUNezXrH0kx3DdpNSlvcPX3choRd7dWoB2D7v70\r\n4tbAMmm8CKmh3O80yL67Jnse+RbeyGkkhD6JLk0JC7mF8Nsdw8QAjeG2r9sr\r\nwvvdD7L6ri5e8TYRHxlfmV6wdJFg8eY0+AHaNtifSlkKRTkXrrnmxquL1bkV\r\nTUp/yOSks88K78GacyaS38t28RkJfTGKpMMzFkzrVEOIlgN8exdC8rWOilln\r\nsIjJJB5Onevr+1KTCBMG4vilpmJxt0zPAAgzudaqq0LBz+w2no+niUed3Lis\r\nXL2BnJcc+3mB+Th17BA0MTgDDiJtvXubBhE=\r\n=CdoY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-386.0_1653515614326_0.1803125245272177"},"_hasShrinkwrap":false},"1.0.0-canary-1787-392.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-392.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-392.0+4d38546","@bodiless/components":"1.0.0-canary-1787-392.0+4d38546","@bodiless/core":"1.0.0-canary-1787-392.0+4d38546","@bodiless/fclasses":"1.0.0-canary-1787-392.0+4d38546","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4d385463a47e400699719b50e51bca1fce87e487","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-392.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-TU7Rhl6drVAd/eO3LlirfFdxAlhPfIB71Jl+HCos6n+p9SzwcEy3hnX/j+sj8g2b7wqFejEQgPCzHfZsYjVlPg==","shasum":"709cc8594851bbcc14f604f529e154cf18306740","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-392.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6yG8hs7cj+2YGOcqf2l+EU9MHdp/d5lTgNm2G/mFc3QIgO0HzWUNe11lVzZnaltFDJDql0Gy3sUTclr9XDhs8IEM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij38wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqy7RAAheMnHx5wdbBBmgNGACj6s/HkRrCDQB/Snaz5CvVO66MDLPlu\r\nKrdFJeHkMgKTqNtn6rEyxOo+bAFPdesf6hWA/AHcBg4yyaInuRnw0igeHOpD\r\nVROlfAlFMQN5o4KxHsMtaWMhOqvE2wCsTrELP9OOfBprnLH42Q/hTMjODSle\r\n1CZmjbNIsVMxbb0Ah7dDd6CTJnXQMePuX0AvZ8JJlerD5FvmH5qjYQnQ3dZm\r\nY4joextoBYR7GtlefhEX9nhQQozgpIhJxUjjcNvvYG0JlkhDX2E4/NH+bhEC\r\nVYA7VZSVvGEyugxOz9R/JQY1AVF5qilAy83qylwb1bKm098Qse7aArfcydhe\r\nPXPkl+76d6QPBZ5/TCfcqNcJKWeZyuwE6BS4q0heWxLVv0FSGGcwckfIX/jL\r\nu5Io5wGGvfcbttrDGKPwDqSTfO+jWNs7ypyO2FlCjgQC1cA1NtzpOlEFmgkA\r\nd1hZWeN1txW0Zcxl7J+tXo1I/3q9n1qTpYUTuyOpHcMFSPbemqkZwe6WcCu4\r\nnuWcHFeN3Dgsd9RM8xKbYcX6Pih5W2PUAboXvz7k32afDgIxSQnW0aQQGKRe\r\nnUQ291KEyKWKH6mv9XW6aecb+aLfqGSnn3VH5GefuYnbdLnQrHpKg3KvZSGB\r\npuqJlQMQO1K6fDJlDketbpwc980Jrq0+5Po=\r\n=LXj+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-392.0_1653571376530_0.9496112430729708"},"_hasShrinkwrap":false},"1.0.0-canary-1787-398.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-398.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-398.0+9b48c26","@bodiless/components":"1.0.0-canary-1787-398.0+9b48c26","@bodiless/core":"1.0.0-canary-1787-398.0+9b48c26","@bodiless/fclasses":"1.0.0-canary-1787-398.0+9b48c26","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"9b48c26be5541e7459dd7557419f7c3a62dc7fe9","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-398.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xoj5z9xFsidMirnvl2zfrBicTDSX1W/eTNrJmwTKTRFmsXYl9rM0fqmmb0hdqe7245GrQ3MttRwOXiWMq/WY6w==","shasum":"0487170ffb03b0cded561e1add22ae50cebf38b4","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-398.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3b5hGmf78YBRidQT6ffegkNvW/7GveSBtt7zlAaH1CAIhAPMPi0T4xTu6QXFUn751r79TMmP7HJ3gyoFWzN8Ll9hq"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij6EjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Dw//WzkHG2tP6ZD2TQIGYn/0P0tEvDO5epCUSaWC1FzsUvUuhgNS\r\naY0MtjggA5XLDK5itS0VdDq707OqEiVHZVR7y7Xb3beqEEGKSORJ18KcqLhb\r\npdKBd5ov7rOajGKDg6s9K7x44KNvwtwKjHtmg3BoPej9Jjj6qPBV/wkjUXfa\r\nYd3xCmCJvQdQFRuKBJBsJ8Zm/dIMFfknLsfDXVz+HfJ5TWM7FJYi8HSsPWa0\r\nVKv4tlB2lVxioSyg2c+bvv80jKpXatdHv9uuNvHyI1oLJrJ8LLYdi66CLphv\r\nZy4DmR7PixWWBySveZE1S6bnFeJ4jT/Brs/8CIhxO0dnXsJ/fCfpanriSypX\r\nwPbKihOzl8E47/UMMPEeWysizmaFJY5g6fiMy+KKNr12m55f2xCKMOskpg3K\r\naPObtalOipcjS8m347QprEuCsXOa9naRXO7P0zrLCawSp4ikqLJsTTtPwxuA\r\nDoApO4Hd0Jl/NLR9EbY0DZbSrjJiYSEBccKheWE3Tt6dwIi/t7AVtrlQfmzR\r\nAkg0reeNK4OnKjHmITHgmuNyBhDOxCOaKzgnQcS0gkFBzwM3QcmVHB4bHIBk\r\nLjcJ/rHs1eISYvBFK67txtvgjVdxrg2d5vuSN1EqbaOQ7iKg8AkLMfRnZQix\r\nvXKytJEFG9/5uIXOe6uGFWI7xg706ebSjT4=\r\n=y5dS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-398.0_1653580067109_0.3619434441627374"},"_hasShrinkwrap":false},"1.0.0-canary-1787-408.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1787-408.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1787-408.0+5e89cb9","@bodiless/components":"1.0.0-canary-1787-408.0+5e89cb9","@bodiless/core":"1.0.0-canary-1787-408.0+5e89cb9","@bodiless/fclasses":"1.0.0-canary-1787-408.0+5e89cb9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"5e89cb9adae8811ed9f47b7ce75fd7ffd5acbaa2","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1787-408.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-NVdfWLZo1MgvAqicpJWe8F9pXHgEkY1qXWAfUCZPfO2eSVHyk2j9t4crjjBD/V5f+Ei830wPWxw24VU4HllCfw==","shasum":"e056d8066cee4e48e74676f66164f0a6d1a69577","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1787-408.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBp6CxUT1+DHQLfDOqFYNymKMkMNeA7pSJ387R2RiT4IAiBUNUtAfuXLEaJt+g7FzcnSpw81oryX4hEuy62eKjrRIA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij7/OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqt2A//X+N5G2p7pd85pAHrebt4y4qnQyJfvBS0R/eON1k2VawdfMZi\r\nW4laT/4dFJEg4za9EoM9EfdsqN/Wo20D0tAMLWJMok+b8ZBbTaO6HjOnBpx5\r\n7eBwmMqiK4lUHQfRWfe/E6Vzj3JDqbB+E4hVGiFRCPcUn22InmGgyWQMXR/p\r\nnchycrEpSK8aDHSd2ylaPLiLRSMqZZOPIpFQj7SXG5SoqIjsVXntKt4XLfbu\r\nvi28ywalyKl8JvHNAPJmb2w8HAUpD4c7rUIDrNpCG+KYjzs3DYAwPH/zX3cN\r\n0F0KsWxRZuPewvkOLu7M1L8MeimcLOea91NRk7mG2IpHUpdQ8xPQ6xSnZOyr\r\nHUxAA28kEnDIul63ouu6216aAJR6SbXZVK0w2XhaeIgKAQ1ZXS5yuvAn6O/g\r\nnyobtoZvs2QBjHIUD4uyoq6KjE8stqAG5BwVWkOJQ68qJU9GyZ7qZOyKXLr+\r\nSnAj5OAhveI4y+60BRDKxqm73JC9LJ8ThU0MRtSC0RjtiBCAtlLu9gRpa3WX\r\nm3zOdo4odUPeYYQWlBzMijvKl2xEXAHQsX8iKdRKwnTyy99E7s7EkRanb4MY\r\n2TrSU5Lu3YW8PkDhSV8HTTteBs37sE+ap+Ax+vzNNFheU3F72fzfujddi8/x\r\nweKQCizB9k1evXnPSMmALrWJJtJZL8X5YpM=\r\n=2iHE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1787-408.0_1653587918518_0.7224552547100065"},"_hasShrinkwrap":false},"1.0.0-canary-1647-412.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-412.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-412.0+7fb1664","@bodiless/components":"1.0.0-canary-1647-412.0+7fb1664","@bodiless/core":"1.0.0-canary-1647-412.0+7fb1664","@bodiless/fclasses":"1.0.0-canary-1647-412.0+7fb1664","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7fb166456f37c08284b58429764e7aec6da346ef","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-412.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-OXtOQZo6sU5+0e1ghm9HzKa6g5qGv/qkjHqG0MS4REaSGUokoMfoBSMnfLCnZjReRP7DMVbdii01nY92zq5xnw==","shasum":"046a0319c2ae2482cbb4e35023c2fb826e965c74","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-412.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiCMrxZqee6pUaByoiFlz7rtyX5jDtnINSFgawgYQ2fAIhAJlrd97Ou2ellh+YtiilblJ2miSNLxaPTZAmZltpU+NV"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij87zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKrxAAjLcCYtuMAe/KRw1JDHHynNDYv1RDWIoRGZDiZDlixAVoHdbY\r\nGoTfuS3lEw0AkA6Q6UQItmX23QIuece8MU3Pm5O8bc+CZ2MkVvX7m/WGTyZJ\r\nWNHLfsJsB4d8TmR9OuOhGr6dFcf/jgC4tiaBtSgGXQEYLL1UzVYcuYCCoeBX\r\nJPq5tux1xoYYcBFpkGq74dcPZDClDqE3DvoFrnvkh1WGaiZzRPs0rgWCkGNU\r\np0kaJw69NIDQ8E1spQqc+zdHlDzVn8cF6A66RdBEwd6W3n4fukOqcMSCQkbO\r\nyvULn8gDT56fvctjNMMW2PJqZcp9lLsm3rgv3Vqibhp+zmGZiXId72SHrANC\r\nY6EINi9r5Xkhuo3tlzFDrxOew7ZtnsgTgN4bTQAGfCQ5uMLdUqAnWMXEkIe8\r\nF3B0DOuzKaC7rkiqjAXKU1PO+B4A/z+wNwBHt7nYsIR4wEIB0PEOWAy/RfmJ\r\nVcvSVX3SriEXVHqCrMFvho1P9yL1E2Qa9YK7eRldKenP+22NXNtX1SUeqEii\r\nsXCRm1bUoN6Z0l6sSbHFENzgynuOangHKCGaiKI6rX0huTvOBfTMXo5HJAXZ\r\n0+lc+NG17k/aq2ZJKfNWHd+1LADiyfzCcEoeqva3v85v/C5UKpcq7teztQab\r\n3ZG6LGoSKIwF6Gu4AXgH29pTJd+vaG01RtA=\r\n=o+nE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-412.0_1653591795257_0.9475574691539881"},"_hasShrinkwrap":false},"1.0.0-canary-1647-420.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-420.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-420.0+a2a4440","@bodiless/components":"1.0.0-canary-1647-420.0+a2a4440","@bodiless/core":"1.0.0-canary-1647-420.0+a2a4440","@bodiless/fclasses":"1.0.0-canary-1647-420.0+a2a4440","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"a2a444037786d119cb507a0bc963db9e3713d373","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-420.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-IdDzxmvAgjU9tsDgQau5oJAnnfNFLzniLsRFlhIO670YwjX1eCBkUdZtbkZhsg/+ziyb1k0xnxZ7nQOwPcilAQ==","shasum":"daf4ed79ae73ea7a1756a1b6ce38f4e7ee8df264","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-420.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyn5DOaqB7hypYWp2W/mbbf18jXgkmuYhrvo24wvlUXAiA2c2vwh9OGFv+wyZ99PXZ/Xxp3hs9SJm7T7vF8LS6clA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikAXyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZvhAAg/PET20pFHI201h7qXKXy9gJXeSFS2GWQMqvz7pPpl6y1YnA\r\nWeUcY7JdUTE/FF0rlz2ug+LfeKnPbGO6yk1N75RD2XFCXD288HBbm9AotFE9\r\nYuG1vr8mLJj/1F4vuMG8+NM9S5oMzsH11G19P/WFLPrpmYRuNHzCp0TioJvd\r\nayhcEznmJG5r/oEM4CwRBVmqqba3nohjefVop25pm6meQ/hUft7qnZWhzA/4\r\nVh70+Ncs0DTBk+h5pGsdQaFlBh59iRIGxUdhXJchXnOfFU3/XPBz/xdqZ/Za\r\n8CUKrDq6vknF9GzH5dIVsV7NK0yk8yRlapnp31huboreG7DQl/GijZAiU0ro\r\ntGGIlr6PI11ObForslR4fDwZq6WGMDwKOwFTzEb9IO3Xec9jm+fPs8G/YQbE\r\nLPpZTTLfzg/m5qy7U/JUoxHLqSOr5AMK6RPiD7ALD37NUpIsWLU5c6vo8YxB\r\nyqcshfFrcQsB8zb7AlfXPkHLOSyvmXu/klTzk8+uM2xw3YB4CjTRSXKpr3JT\r\neLGRr3sDehEACOB5GyYKdjHEvRnxqDwhUBepExzT4K2bBlzvw9Z3Ri6FG4FF\r\n84IjL345zAF0Gs6UXtqCLqh6Af66CcJ2GJOcQDxY9PM+r2QJbwLKzPUOs/MI\r\nEK6TyYZafWfoqb8YZr/Yac3Tvmz3zLNLCT4=\r\n=rShh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-420.0_1653605873877_0.8406153878606906"},"_hasShrinkwrap":false},"1.0.0-canary-1647-425.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-425.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-425.0+deb9320","@bodiless/components":"1.0.0-canary-1647-425.0+deb9320","@bodiless/core":"1.0.0-canary-1647-425.0+deb9320","@bodiless/fclasses":"1.0.0-canary-1647-425.0+deb9320","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"deb93206b47ff2593ae9d8c756de46b0f4a1c752","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-425.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/4.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-XB5LSmIJ25GtCYe1hl0Bsd/12Xt4aYmYjSA+WTFOrO5/QKg7PonA2opWJgpfeMWZuGPQhag7IXQ9zNvZ4rWfNQ==","shasum":"37992ac8f7e0b8eb6d30b700cf6c07f7c4548e0c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-425.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPB0+SM5FWqBH7DLIyJFkqelNL35IJGcCovSl/gez2KwIhAJV6WlnmId7dzILDVKSOCCHatSsngw3J/iWZvKWUKKiW"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikMyPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmaA//e6f1CxoMlGXAReQ1xWXaKKc0rgfYpe0mYGdi1+LNLhP7Zwon\r\nP4Eryf+zo6OZTRVP3NXjG+iHUmfK2Hw7KboikiDjA3O7VuYqozwe0yOenukY\r\nQwxnqpEXvtTmNuuuf2GrzyRJMC22zEBhReqintzqZ9Wm3bJcEvNXo5LzbL2M\r\nzcLZcQBV7AWEAq3WkNz43+RFyjD4G5nM8aFI4QcQT6ihFa1ml1+8fyeV4Pzc\r\nCAMtxuARJkDxtcIZxFDgrFBxc5SPvpAxKNhNADfn2aMS5OYxvawjD2IFEWhc\r\nXMnZTHx3mn4/gB2AxqoyEdzTvejIkg4RF7L1B9HuOJLxezBVCKMz1/MJrM7T\r\nfD+HZKQx/vQ8L/xZ21F6Vlz6oOnDPfrKoWifBCOVvYNZeE+L0TXHiL2t4qKA\r\nZvYg7rV0M+ggCfHE9xHZujX3SsQ73sAGEcdPGAeQ275i3KJqOKLR3gNfgWij\r\n3jnjd3vaj8Qw2zS+W/4166HYv8pnNQkyyc/ddoZ0POtEq08vGLp+yGepq/W5\r\nYnPfl/R3Tbc8kzutUcESBj3nOmcQb+azP67vaGlFRvCUD2t3PPiXxSnBALYK\r\n7Vjh4i2KAcw1taUQ3KVsCTfLnYfUt98qhSJByDuAiNOr+U1fGpHMrjWZiYcT\r\nLykpwY2umEdEhCaM+sYEI6qXGJ/sT+t8wgQ=\r\n=UFC/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-425.0_1653656718825_0.6561211937486278"},"_hasShrinkwrap":false},"1.0.0-rc.2":{"name":"@bodiless/youtube","version":"1.0.0-rc.2","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.2","@bodiless/components":"^1.0.0-rc.2","@bodiless/core":"^1.0.0-rc.2","@bodiless/fclasses":"^1.0.0-rc.2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"bfa73cdac5d9dfeb72b00ed286ac8f6cc16356c9","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.2","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-K96Mgl+S2YsLpsjiBLnKvyW8DDot6C4OXJWwGCZoCZzSks7sNVQeIaDl/V6DFmOaWX/CTbWPA0aCGkdOxQK9dg==","shasum":"1f90ddee1c02c6fc119599f5533231d38aa2462e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.2.tgz","fileCount":19,"unpackedSize":217150,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr8wmo+SY2QwdFQgiTYlaAkkzL6+bbYZMg8GIQe5+UzAIhALUwTO0fwp88hNraQXb706dfzwoabbfbHIStvSPqc859"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimmLKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogMg//cecm93tBWItvwGQrZdNFb2UnHMSMWgF1k7Y4dqju33cuaz3C\r\nmq8HdhW4KeTsmdv0xXvqRZ8t3uuu/ioRsrx/pzPT0YYFWQNryA1Cy+THAKH8\r\nnDJDlme2YOE3ZX4IxIqbvIT38IaMNgQh7F6zKsfBaMQFLrs+zGdxFCFc/L3E\r\nfXblDW+lkFEZVcdYv1B+/7ToBH32UP23ubxKobKR/ryL37fA7pCwWWMrLYjp\r\nEAs6XXIthG+CiWco7gyldNsTKzR2N5R+dxhgWMDvdb53q/kVESbYC5cLg65c\r\nrbpKgsw/k8Sw7Nto4Ngj69vg9KC8xPtlWp1WCf+XBmEQvi+uUQo94BuPlcOh\r\nVwfZ7wqR9ixzMmHsMCEYBDkeHbSXcGKEUE8w9IJ7aUQxoCqiFREHRJlTlnmD\r\nA6nvJ1oMtMcAlKavd41WXOUs7e4xShFwUPDlEAuywet21hEpcY4P6dkj53/M\r\nr+YzMv5up7T8CnPMPBEnzGDGGF/ueqq+oWLBslWyA2cOZ+tkAF/M+1vKd1nT\r\np/Y7xIw5xGR8CKDE0o4sAImpP0bLuil6qSzx9GcJKFu1AbmFWCgGAZEaMDyK\r\nUtP59kuH4zd+sMY6tzxEyNpNPKDty8ZKoqA+DO8i/DmUlxin9SuzqwANMtWr\r\nSnJaexl4aWLBb7QDc6kveLv1jkvQQBIrCJQ=\r\n=eXZz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.2_1654285001911_0.6142143581882911"},"_hasShrinkwrap":false},"1.0.0-canary-1647-475.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-475.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-475.0+4c8aef8","@bodiless/components":"1.0.0-canary-1647-475.0+4c8aef8","@bodiless/core":"1.0.0-canary-1647-475.0+4c8aef8","@bodiless/fclasses":"1.0.0-canary-1647-475.0+4c8aef8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4c8aef8fcde46eeab3878665dc0d6ebd38316787","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-475.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-VB1iCiv/zCD+q08hQB0J5KVTct0O26OQLagkcqixHxqIUAUM5Q1aduHhSF1s7K1WUH5f5EkapNczwKbBCj3wcw==","shasum":"d333e4b77c990764ed47bbb2e1cccf723f8d5e6d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-475.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOKdhkR10rHjoQYvEgJdoIEI6ekzrBb2cJG7RJMzW+xQIgYjTIhrcJ4n7MhK82t+QqvGMy1fH2wfmPXtv2bIkVuro="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin6FYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorSg//cr/hNFAGTcynMRPqNqXZgVldZJS5ESxwbxx6FNl+qM4KReJ1\r\nPLzvlrITOhhhe1kX+939fo8e2oBgcwTXHo9hVl8Byh/pgBRX0qK3Q3GLjuhE\r\nwkfdfvqXhtt9conY2AURWlu/bp/+YAImPYEuec/hxWURy80sGmZBt/7HMeIy\r\noUOy0OcrV1aTaBefhR/OeeqvM4eSQvZC/lbPWKgi+NEc6rPEDSLV+9S30gqX\r\nzeCS2p4FXdmGSfoWaLQ61qKGkLR+0VLIqo8VCSFSibgkDG0hWEcFH0+pLRDQ\r\nii0dvkuDRewk57AisSDdVYpVJ4wY4CAzI2Df3Fpacwp2UaB9H8rXlaQoiyBO\r\nsHhWjqo1Vb9LHqJchQTYVXMLV6QjjaxQREEi50hnLZJc7Mmh8MBgraSdWSPC\r\n7h3wWGSl59ciHYYC4wZ4DHBR9AuzCPY1dPCpZZRjwrmCa2IweEyirbC8BwSp\r\nZOx8vFBYO/30QtCsDaORV9f5uR9SmRTCmSWv4XBcg5PYvKeIaUYYjqyFQztF\r\nbP+CgZaYKX0djnzQbGUHwr/7qNBqfNRLsUrDQTT3Wl3/Mm9kbW7bK0VGUQdj\r\n667z/syOFFRRadmQnqWWBacZe8Qmn3O4SgBrp8ZpY/4iDL9a3gTympiWA2OT\r\n9+joakLHHUJjcp2KP+GHzLE+h3Lo4Lzt+jQ=\r\n=bs5b\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-475.0_1654628696696_0.7982005088989186"},"_hasShrinkwrap":false},"1.0.0-canary-1647-477.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-477.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-477.0+c402773","@bodiless/components":"1.0.0-canary-1647-477.0+c402773","@bodiless/core":"1.0.0-canary-1647-477.0+c402773","@bodiless/fclasses":"1.0.0-canary-1647-477.0+c402773","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c402773b23c5448c68390f1367fea007e4d48428","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-477.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-v2syhYChpVS7E8zRnUloRnNUNUNYcmoMjDTgEAH+4a5fHF5vSIdrJAFZ3Nz5+1PuLRauhZc7z44gUFzNm8szEA==","shasum":"d8e1958223d0d10a24c32817bc53f19a66d47997","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-477.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBleaCkJVjqGD8e9SR8YMo8+lHHLhipx2K9Mc9bE+OUBAiEArafnyw1QVZ1FfV74lU5LCYS/trepuYHM9dN3ZTDX68k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin75gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopOBAAmiHzj4K5UDavhhsbHnhdTWlkx5Y31ZUjallNwy0NUyWlD0ty\r\njMURpGp4bSWISrPL3JzQb0o+O3nw4eys2PGngqxvKsZWSg9080yMeIo+lLOA\r\nGo6EUAd+K/0NQnRm4GoEJD01FpD1eRW4G0XX0BXnBfGXagdyWchqBfckFfRJ\r\ndAFU7LmZcgeNywTNaaIV4CfWP0ZAzKB9uo6VvzwczEf56sxrPdFOAuCTAi31\r\n9MTDPpDPfidFTNTIDWc0S4aND8JwkaiCZOoASWE70It0zXoh5wqc56xxup4k\r\nlZMeyTC1b4jmRqMXt2v+maZMM9CKqXKevcV+MdM1GWLBrXLmiTH6ulcRnYp1\r\nkKoZBZY+MQ1P8nOmraXkKg4ysq1S3T+ZK8ptqPMv0Z57BSF2jJFv83FFXbhG\r\nUMgproG2pcvTpHLLLHB1HH+onYUyNo66zNvyzeIkay3T3zjFtLoU30cJLo1v\r\nueKb7Y/7NAJROFe5gUChzanKgdbDwGzDENxxD/+iYxIcGh87QgO16aCAD4iB\r\nJjUDdpfllRSXJ2qIf9OKqZ7YyFNvZMUAx7sLXglQh0p20tqkgllwYTTjqr6i\r\naQ5VHQEmbyVqAmO7eAae9g+Qo6vuRNoyT/bhB6yN29m/x7ALXGXpcH/inj4+\r\n6svu9jWphR/0kx6qi6ObmtmM+AWScmDS5MU=\r\n=/apk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-477.0_1654636128106_0.26204013138230486"},"_hasShrinkwrap":false},"1.0.0-canary-1647-478.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-478.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-478.0+f6e5022","@bodiless/components":"1.0.0-canary-1647-478.0+f6e5022","@bodiless/core":"1.0.0-canary-1647-478.0+f6e5022","@bodiless/fclasses":"1.0.0-canary-1647-478.0+f6e5022","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f6e50229a234aeb8a583a4251603de786314995e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-478.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-o8MN8G1fwOAWF0oGCz0vWKX9jw5EKo+Vh86NVadJ4USP9pHR5XbEM8pQM09HO0UKF8d6GEJ62Joa2vZqWj0Ctw==","shasum":"496ed21e5e138c8f7520fac115d604cdb9b99316","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-478.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZKwZDgQQ7NMoS+FfECcZufDni2Kbmju54M42TlVqDsAIgQOy96Ww+I9mOZcjTynE065KcJgCQ5+6OcnkPfkpl5w0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8whACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVzA//ZlY4DbdjC9x9IDc2930/UK/IjGSJbLPWDcxPNJHVEN/axSfL\r\njFSGsa1UcFEPVCcmLXQ1PBK4khheqECS4ZSX4pNwvthfZ47OmSK5SOqpe2m3\r\nglrTlHodrcMO5WXyapQK4qwUJxMxbTlTX2afYPg3109EIf3eK8ttXUfgWK+t\r\nUrs2tpkhuFFG1Y1uh64s0M8LzXi/Vzcw5nuEWFTd/ZDnTi467VXcB8aLFWrk\r\n6/6IBHtawVsVVeLhIBc0WdVL4he41P6Gg9PNpavJzQ+YoOkEDTKBtzfOILYw\r\nFP2FxvIU5JKMnBUNxqUCHoWsallNX7mjtajT1/g1zy44BSoTEzh1UAvDiiIR\r\nKAN+Gd7PYoEpmt4HgEZYdt9bWBxeHpN8ZDtJm9mdxhdig5y3BBwca1TOREPz\r\nUXYRayG5uG96eO39LvMZLPSX015ACaZMA0UruG/QIJXYBVtl6fN4jCHw3itP\r\nK8kSur2AVTDqdiC1p1njp7ydBuUY2uJB0DBwAQmLQeWbI9vLyKrQ6OSb/7Nu\r\nhUSO2ENqId/mXX6psnd3aDB1F2VqdxUFaMePnzl4ZJh91LPMBu41OxoRswyG\r\nZdSXKcagWBQIjLccpR9LvQwOl/4fF8aSjb6BIhzDRlIrQAZmOIFpLKtUVck4\r\nvtaSBRhajiLA7oIOMxJEh3s7v0nkiSVy6eA=\r\n=OsMw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-478.0_1654639649302_0.24951939730486306"},"_hasShrinkwrap":false},"1.0.0-canary-1647-481.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1647-481.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1647-481.0+ad14479","@bodiless/components":"1.0.0-canary-1647-481.0+ad14479","@bodiless/core":"1.0.0-canary-1647-481.0+ad14479","@bodiless/fclasses":"1.0.0-canary-1647-481.0+ad14479","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ad1447913f1d67654f853a8bd6544ca88dcacea4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1647-481.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ttyarXgnKbLNWjCsD5THSBdW33jd9UBRQxGPn2zIZFBteeNduKJdSW5ENhy4FTGOkZcApoXmW5yCwIsjRBQ3yA==","shasum":"396d90d9417cf83b29159f87d14105867f221d5f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1647-481.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOI+uey/1FxCj5XgTfU0dTcgPHO/taVHBgwCpcquKCfAiEAiX4rs4HZ0k55JHXKJXORDjBfKvzc/BV5m8mfcF3YoEw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioLM6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwGBAAnjRCoxNt9e63mFUrIUxNsTC1Xubz7isoMuR51eay+2WqWs30\r\nOyqxwDyvZrud2RZRmaqiU1zbvBTbDG8Lud0d/BOaalqZKYAitClHC0VKWkwm\r\n137Dg7QpBlwsHSTsaZbuT/lgN7n3+b3DqEFIQqk4Y5U/wGPRpgns+kr0f8wD\r\nZEnNzTuESNUnPp9L36BcL4LDPlI9Mwlc7li7vfLBMCsFVcDkgGQEfjNG7i7A\r\nF+FY9Tc30orpKW9uFUxfYasoGBD3DQMqV5G1lNjpaQk0nek046UvwQIONAtn\r\nWkmg+d0JKm1YeTOu8lQvNpXuMWwuwJYAPSr73oFWuriVRcsQHuSLYqe8F6xg\r\nhYlSC+lxKotGRJnsVJFE2RKTeL2dVRPeUs3/6572f0DK1pwpQf0vzGd+bekE\r\nUbX2gGtJshiihCCy9DiE6S/Hu8yQJSno7ytdOUUMKvndyjCyf3k7opHWbP1z\r\nSw4EThsqd43C5jP7WL0L23m36eI033QOMMKsQ/wiZoq1k/1QT+88JCPvt4FX\r\nshe7QoHAdPR+rKuwR9/OdisgxrBsCmw5N3j2uLk6B2ZPrTv8hPNC81lT1lgF\r\n1HrVVNmRifpuzwUdeTtmIbLs+OdnKhOzOGxzDu1jeEBU0KqJRtYO8wJSzzKD\r\nF85l5AfgWi8L7A0SgW5ens5oT1rJPQFnQgQ=\r\n=FNu7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1647-481.0_1654698810508_0.6379345165683719"},"_hasShrinkwrap":false},"1.0.0-canary-1911-491.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1911-491.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1911-491.0+bf70e64","@bodiless/components":"1.0.0-canary-1911-491.0+bf70e64","@bodiless/core":"1.0.0-canary-1911-491.0+bf70e64","@bodiless/fclasses":"1.0.0-canary-1911-491.0+bf70e64","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"bf70e64eaea26b73f72e62abab59880c780fe072","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1911-491.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ICovSfobqeikVq4HEp8VmyKDCNrMhP3KeCyjLdvgLoV7i/lYsuuoxegUBpwMbbtCq/1T95nXq7B4dqV702WQDA==","shasum":"77a24ffac0d667752f51d84395322d78d056e691","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1911-491.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj7GB+sM3IZ5nbNXMXQUvLbn7rXnWq3cgZSwP5czwZ2gIgBG0Agls13uuX1FBLkLgCj58ueWTdbgB1ck8vBxD3UNs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioi/hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEVg/9EhZxpRChznOknjzX34K6Zm89TlzifrIMooGWMSMnupcOIeOI\r\n4RnjD8QSMQvPY3cMVzmZ6mJfYMld++qzswChBW3+UYYnxx2XQ7jE75YOOO9p\r\nC+outWd9g6KX9FemsUm/tKn5fle2MbejB6GW1feWZQy8G7FjAtBF4mYim5w8\r\ngkkTmbgtyUyt9xBFe0F9YCc2tU6ugl5He2BqfDwuPdMp9+eUjnPJRlyp557H\r\n/nBf9Mye+BegD6lUMQXUHrV/lzZ8ph0DOfKUZ4Vqub8ppQFvkjVZxjO64CVc\r\nlfOnuJfLmWxdgUQVWlZEK15cTm0RmHznk/0cOXP+9cSr8e8Gas91lrM5sMee\r\nKOxJdc7pYXsVOLBKAQwSOdhrbcH56StB1rLXy9UC3J+zgGDps3W16qkoSub3\r\n+U4ph5czpZ/PWOy0bdU/ktcnHK93arFNNdEcPvKnIwK0/WEyPGP0N3nXlkN8\r\nL4Zl8PNqECQOGQ1hhKujuIx0f/QaqoCr1uGUdw36Y1aGTmRQeqPUL0s5DV4V\r\n58E7w7ZMtYuw23uxMW1wpc8wk5vinoR+NvFjSYnTc18fab9eybfPFT3b2All\r\n0Ai0auHgRc5AznICteAp2n0jHPv3S+7lH0vCgwHtKJro+savt+85SA5tYXPe\r\nbnnG+gh6K5t42w3fd9VYnjbZTy9I4+kLUNI=\r\n=J5NJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1911-491.0_1654796257359_0.3686978190976624"},"_hasShrinkwrap":false},"1.0.0-canary-1911-492.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1911-492.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1911-492.0+bf70e64","@bodiless/components":"1.0.0-canary-1911-492.0+bf70e64","@bodiless/core":"1.0.0-canary-1911-492.0+bf70e64","@bodiless/fclasses":"1.0.0-canary-1911-492.0+bf70e64","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"bf70e64eaea26b73f72e62abab59880c780fe072","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1911-492.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-5bqtqZQGy82B53Ws+n+0oSTQCB+gTxWAjAMyrKO4mYoAPqTueyz/nAB/owXg6go7v6/eedPvPB3sEYsXl7lhnA==","shasum":"bc0c5ccc4781100d9333aa9562d8bf08f17d31f1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1911-492.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiHf9nsnc6bhbsUWqdDbQTF6TJI21iecnQQA12QU9CegIgWRsJF5mvV7mRWJzdui8c3Ce5sGX0vydmQQgtE1jqaAU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiojCEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLdA/5APcBLarEpGOVF8TDFD1b4Y3SA8fiToSPcEbm9P9OtsN9nz6v\r\nceKUEi29hkgEU0oaUP5/Qo5csa8Dxeh7iwqNi0qPVaZf1Sqti7ebvgkysIY+\r\nziC6pl5OcHrP80Osy1Wc1yfNV4x6jmGFgHoBDM2Gh5R2DmOPBisdl2gfgjzW\r\nLfvX11Q2F3dZwyfRReP6O1wpW6y8xJ0c+c1ImqtMlWTBABwtRfB/dglRsEou\r\nDPaRMsVeiHT6Je0ZrF88XJyAIKXzVGDk1hAg+jXuvpy6Db3xOEBfqkaCV34P\r\nCVVgLgUJDnCVJJUI+S4rlfyEbbNoT6jasItyNffg35rCYmmiTksQa0J0zKu1\r\n/1Gm4FQyh2lajKC92SG2moGOHIQLL/VKKl3L84WmtZ5lgLytQLthq+E4SzBa\r\n54nV6jqJAMVlK4dhGPd7SqImRXT6VqnxvFSQsmUc9HaqLGjkfru8LtQorLlT\r\n2qSRLJa4/JKaqSGkrGbi5K1/8LCz3wkKGHwDBQGNyhKV491koga84WfqkEKS\r\nKQ/PCWsTpqkmKUDDyEFt98UPQGL599rwXbHDOXnT5yQhswvKG2IbtNr+P+RB\r\nmi9D41tm+70ttoE66FpzWmZOaQmQJg+SJJ+D9jjLqABp8N8xMgkir4rN43wf\r\n1+d391cv0OTBQOXKmdPzSui1A1TltSj8yKs=\r\n=9nKV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1911-492.0_1654796420435_0.017189296638570717"},"_hasShrinkwrap":false},"1.0.0-canary-1914-493.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-493.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-493.0+f0e0b22","@bodiless/components":"1.0.0-canary-1914-493.0+f0e0b22","@bodiless/core":"1.0.0-canary-1914-493.0+f0e0b22","@bodiless/fclasses":"1.0.0-canary-1914-493.0+f0e0b22","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f0e0b22d18d16030aee26634027b63c98583b5fc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-493.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-uRNCyj58Od0YRAy0Cpm5Fy3tjVnw+LzfTWhpBQsY3g2o5gOSE12EgeCB/jh7D644xis1qJ+S3vNzb4mvogF9sg==","shasum":"7bacdeb2cc9a1420e1932423796107913cadb9de","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-493.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHXbHMbg/6LzOC9l/6R5CE4S9PilALtqRZTEbB9MrzGeAiAH1ibasIiE6D44ipVqYnFeqCsCqCB7rUQE1zidZUnvrQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiokFrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZtxAApCYNMlSCS/A+1/JT8Q6K3/2QP79GGL9h80fW4bWd3JMAfztw\r\npBQok9pAiBw+KmFJhZk8v6afa0rdjewm5/UxCkminl1xb9Hr3mVV86XAX/M3\r\nB5PEFFCXbJT2VYJ9PbvYLJrNcmnvdEWH0IkBncpncJZ6dlqgxYdeJ6xVkzuT\r\nQg4uUywBfw8K+e5bOXMmoOnQXOry1ygtydmjUcjtKplRneBHUzcNcSOrXP/H\r\n29tL6heK3YLlwm91RjjCMi+gMRakDYqexg+Z12+z/Fj0J8UOryfEcBy94Qyn\r\nN23j8HlKjuA5LHAEXdZdqzb02ky3LXrqjQ2pGS1jJhBo8Wg9Uhbob6Rc7oIh\r\nO93/xOVq8yw5VzMOOGBc7uA+vMqJgTYIGeTlevPMSYq5vZGPCozGP9jGDONx\r\nNAV+jyDxl1GyLYwE2dxkaHfDbYVcp5dM9fu+3C9+1mySFDY80pzOlXtjbzfi\r\nci79+JnR7mCtv/FSxsBFglBKfkick/VaSKf9+8lqk7SGllqRPB3UUTkoZNMh\r\nfP6YPUEW84Z25C25OOi332ii85UotdVLNv0FGm17XZ8ms+ZqFbKNvT9Nuk/+\r\nfLDMAFtz0teBplc8kbkwNAFvpVzcj9tyyqezzxSp9vFHin7PnAf8hj8oQtNt\r\nM1DEP13wDfuf2VuXJfRvtdVcGTzHsriBr+o=\r\n=thTm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-493.0_1654800747257_0.7731876327237444"},"_hasShrinkwrap":false},"1.0.0-canary-1914-494.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-494.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-494.0+2152cdb","@bodiless/components":"1.0.0-canary-1914-494.0+2152cdb","@bodiless/core":"1.0.0-canary-1914-494.0+2152cdb","@bodiless/fclasses":"1.0.0-canary-1914-494.0+2152cdb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"2152cdb670cf1c4ab981f7c00307af6542257127","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-494.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Fg4nGumbz2QaAs15H2Vrubg9WKj3iGH6IkcZQnRTnCVMB2hHh1OnBJyx/aH9j3sebIm762orQon5N5i5NSvfqg==","shasum":"f643fb956e8c563801e157beaf7a423d27fbf39a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-494.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVSDW4F0zOXHTuKpCEjJDC4oEJ4m0WfrL9LH5WYqLpnAIgXQdvSElrPCOH118Ihf0i/U5d3UxaCQpUTkA45xu4TSc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiok7bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBVA/+N6/OoCsQhF6K+rXhbDYADnHWq5IFHj13VksSyvD/avpeJzE1\r\nWu63mVZAybSwBewiGwi1KL3n+bqPOXxbnqpJQsKoudLQSLESCo3Na0mwrN0O\r\nU6/RWaHa39bzuReUUXdJBd9HZHb0Zu2j8cDjfbFesfrPO8cs5bz9Q5+7jvfk\r\nuhA3+mCXtAxYJOYqupwl1H079A09cmFauuq5ZdE0ewIe3V3zn+AvoKYHO+8n\r\n13NbxSQoV6UGHyHLMYbpRqxF6XJvjeJpmYnB1ztDnFkjBbBHbs7sKOqUm2hT\r\nP2XLklMXDxPcdTWJ5rC3mMvjU+yFO92ZzxN6f3MDFrLdCI44uYZoZUiEtYz8\r\nmvEEnXFXiChp1nIJ6+Kvq3GX0TW8ZREjnlxAS2c1RvPwId+jnuJodV609Alc\r\n8jip6Av2Pd03uoGcfIEfja1mDldn/5nF9O9+3SZtlszANod2IAT0aQ8jz03A\r\n9U44yYYZf10hEK3AwGyV1CVljuYLQZ1OA5hOk83zzFqdF+PVWwEjURYHysCa\r\nHgvpOhTTrYlqIzZ8o24RRlMRngBsYdZR+ewDUn0lAfcArfjN5plF7PNDb0dF\r\n1hOrALAAy3ZVhbViIne+1DySlLxDPA2MeTk7lmTG217qkY0dTqTiY2EjKtZU\r\nA1O7bwS6DxhSVvqT4CF2SqLDDF1MUOQNkXQ=\r\n=VhlQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-494.0_1654804187744_0.23440425837096512"},"_hasShrinkwrap":false},"1.0.0-canary-1914-495.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-495.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-495.0+9bf1faa","@bodiless/components":"1.0.0-canary-1914-495.0+9bf1faa","@bodiless/core":"1.0.0-canary-1914-495.0+9bf1faa","@bodiless/fclasses":"1.0.0-canary-1914-495.0+9bf1faa","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"9bf1faa74e47453764e8d8c393d85a7fc004025a","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-495.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Hx/SmwFUogmDg7bxarqXX4ShRyR+t9dFxBRPXAg25k8cKnL7s9GVLVGByjAMSEij9hKVuIsbvzclUrQ7jkPVUA==","shasum":"d401de24e4a6e824638f0c53c01174d1dc51915b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-495.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6noQoTLRO+28eKRK72zAzMAjXB9ft6SprjOKM4+ov9wIgX/1jY0tWCKovDYgqM3+D1snNJI0mxnrvB45T+gpQ24Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiolpZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Jw//dCo6OmHdRHT9Zjoc7tO9rYVJimQ/1zcP6EKnhz6sOQQ2UVHp\r\nFtFPQmtICdebtytDhsfeGwmvlAxf9WRie20cF40/NXmbecA+8tcV5ArpfGVo\r\nIIAh6XyrozMhdtnvWQI5zMMgVZHFBr5hIktrHfbnRW3RMg2z2lag5LyJEgf7\r\ntF3+7q+wYtmHFJM1ZNKJU9OOmT5CSiJWON2E+HQ7IvkeBF5F52FQ7B7r8JAL\r\nYrTP1/QfNC93TH11qelEWqMNDV0IT5i3fPIparL5tLdYzabs+w5ysNDs4dbH\r\nGn6+uiE6bAt19jF9uYPgRF2IJ7XnmkmrNBrlVtq+RCuO6B1hdxwh/nfc7gph\r\no2Il0pOIMvUxaqPRigHVLb/Adm6yGjwT7u1ty3TaSWas0RaSNgh68AnVnYMQ\r\nYRDtXWXdZK1Qd0Fx6jQTRikj//9V8AmG/uLsPi5u68mfRhngxgytJ9CL8Yb6\r\n3UPdy6l/zyBXSb6R++/4GRy0ifebq5Fvi5/Brm8tXKMLtiDkWgzQuLDhiHfI\r\nfbG1LxXdB5OHNrBfcyY1qBOfLt/mSByNUJX8+wwLdGXcpNSBUB3VnDHYhNsd\r\nKKOsRnwE2S6QFk5Zwfzzl8Ne74LkzMvtydf5N+iY95g6a5ATUdLwKEYdFDaC\r\nXjbJcr0wrRPsLhCzdAKPLUGeiRwAmy5i1tI=\r\n=bYz7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-495.0_1654807129751_0.8576681052623707"},"_hasShrinkwrap":false},"1.0.0-canary-1911-497.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1911-497.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1911-497.0+1b3490a","@bodiless/components":"1.0.0-canary-1911-497.0+1b3490a","@bodiless/core":"1.0.0-canary-1911-497.0+1b3490a","@bodiless/fclasses":"1.0.0-canary-1911-497.0+1b3490a","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1b3490a0bfa85893fb487f7ed388e9fee43f40e8","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1911-497.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-bg9pZAYQkz3JOuhsKO77YGfzHCKOFGEm2byXbSkaFfmojHAVHnaEDJzsV+MpGCLf9nUgS/qoA3s6IVG1j9/9vQ==","shasum":"585a6e64023f56c9e272487de4c5038578aef817","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1911-497.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUjl719evnz9rFMQMIQ9BMjJg4mex8VdtygVnZObVkegIgYY4L1D2RszYG/R2ub6WPU3qey+vMDVXBqFXVnpbym18="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio1uTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrR5RAAgeSVFV7D4wNOogahlyiAnSPwgDua6CbduNZ8eC+AfO4vEwdO\r\nE4gTFr1W+G5yIYqcSUuOsw2o7cE9Jdtiv2woM6QTCsUYupvNx1sOU58spKEm\r\n/ITyQcZ7U0jvhcDbd/LA3Ip1Fx4j2Wh+nwEMb8Gs7nKzGHgusGOtIg3wAjPP\r\nLxaKp/ZSsSpQPNpilgL0AJO+0w3cYP7WAqDhP4lSkYXrEnN6d9wNxhRJAS9A\r\ns1XfbmG107OSUsp1SRQQjBKQ/anJA63NBGm3QvxSaC7DJVAIVTV+9K/FFYUl\r\nNp2tE/Mmh1qc2P2mqN5pTnR19V6hjbQzEN3DyMh6JmEq/mbPDHv0DxXczLMl\r\nJz4g/X8RZ4jFyrzcrHp/Bbg31v114dhbJJWyXwKjZd8Gh0UHugO1LAmDjmyt\r\n+ABOTyUzmsrTlN2+1NsRjES02+LxhD/FxrlnbX2hDKovfU9otZTVQBScSzSq\r\nikMDEdvXA+LShnX95RTHCyl6WlFSSx4hcxR74D3g0r0dCnWwjsBNVBOOx7yD\r\ngHT2ybe/pw1fMGVc0dLxJoMwWW+7v5nYl/PFE+VZF0TTNdAKqO3WV7e+4LcN\r\nBTpBf4TRzeLq609DjyEG4kd1MFh/YEqNqxU/++IukiCpvoc1nuIXq1wLjgdU\r\nAKAV7MHadCzDFiRjeBjRgR2Z5oSYbUjUO50=\r\n=17Dm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1911-497.0_1654872979386_0.7082278720770201"},"_hasShrinkwrap":false},"1.0.0-rc.3":{"name":"@bodiless/youtube","version":"1.0.0-rc.3","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.3","@bodiless/components":"^1.0.0-rc.3","@bodiless/core":"^1.0.0-rc.3","@bodiless/fclasses":"^1.0.0-rc.3","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"9dafbbc331aa3c22c1a4204d04f961775cba0a5a","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.3","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-LM8OCs/bxif9SSZx23IrYahUtBEoxaE9kjkXSkHn0tBYyO2t/TtjuR9aXvTxiQNjXBRw61B2NZJpm21RwLr8lw==","shasum":"7a8d95d83407af64b972b949658dcd4ee7edaa4d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.3.tgz","fileCount":19,"unpackedSize":217150,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmQ6/0xgxthh9i7K/ldpnO+Rb5gzcIFin0/sfrN8T2dwIgT4lABNDdQ69P4mXNulN4Bt4C0gXGvxhxco2p4np4QCQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio3lEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/0A/8CSp9nGBiuEDOjkmVRFqmfK3p7m4AgpyZpQTLKL5nuzkz7Tdl\r\nat8yGcTK0xtDHcn1ema5hoYKp7zKliEHck2ZMWiN5/NbxgLIbKmsbHrN55iq\r\nGKBlFsCgNHfBbv9wR0XABAGi4rBOU8SA91VTVf7uc2zJD3SH3bLtgWaspk91\r\n8KF9I3zKumW4vL6mYpJALXzib06HeWyJcNHgDcw4sHVjStUr8b2NRflb35cD\r\nNJEgUoY6wj+qZXF/L2Kn8jpN1TZD/SN3yMpZ06JTiY0GpRxnTMzf7uRpsF8k\r\na2+XHn77JAj8IXsSEpX3p+TGcKCI+QNg3OVUtOSS7I+0CYyINa3Df4qidnbe\r\n2yCp3I6FSAEaaogPPoqoCbRdrD55l+/s3gr0YPCSsX6DihZnUV3vZpYkM+oi\r\nvD40UWEzVQpCwqEe9PLxDMeckrBPilwiIntKOFhwUP6bnLub4q7E8dzqusqc\r\nKNr1cdqo2uWr+YIVxpRu6fwJ5cHog6On7i8sIXTtDsjFNaMuaEMXWptKDheb\r\nuqUyUqQNMzrAj69GyFuj1WTCQqh269cMxKmY45m6bgA0BZWwdI2fuWPkzr9N\r\n1aqbOIomhLJs7TeOFwVAdi6ihKRN5M1hsixGfS8RvSDU7yPHh37Qm8bn09zY\r\nTeT9H/lEXYH7Jn9YA3GCNExmQx+QRTiv5dA=\r\n=IKHD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.3_1654880580045_0.5044129221733187"},"_hasShrinkwrap":false},"1.0.0-canary-1914-499.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-499.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-499.0+321a2d3","@bodiless/components":"1.0.0-canary-1914-499.0+321a2d3","@bodiless/core":"1.0.0-canary-1914-499.0+321a2d3","@bodiless/fclasses":"1.0.0-canary-1914-499.0+321a2d3","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"321a2d39c8530c3f6f0edcd61ff22dd271f22d12","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-499.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-epkrmhf1ksuZjuSOQH1sw6QurxycIqQ+UVy62Lw7NITkvKF0Np7IwMpyWs6KXSJpv0ZrqG8r3SU9z31enROOug==","shasum":"c84c2fb3108312c741a0911050c698651f35aea8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-499.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1A8Qu4kdALUh/pu5czm6z6yx4aT2zZm3WyGmKWTkwIwIhALcW8tRQQGFD/lMro0+OVj0dbXP1DFXD2qEcOPIgVyqs"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio6mkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/xw/+Mhm0Qd9RjDMINMNvoqXE3V8QAJDxoJOeBmKfR6hbaGV06k67\r\niHfw5phfZOWuRk5+kWtJoNzehfpN0UkOSzKyA0cnt69nWJo7iQbt/MszioZP\r\nHlmoeintlfzqHtc8K4utWSSt1I+IrBbWhLGdY8ySXaPyIXFE3tQeRb6SaZA7\r\nXG27EF6MX0OXhlx0Nza/8LbBz+Ei2pwWl18aFOOCIMmu5f1y2vVBoezLX/rx\r\nFamQYXh6lxZMC4wMaL6sSFX6G85V7EZ7epUkt1D1aAxMh//VVDOIns97AIDp\r\nQhqO1zjeNeD5qLU/BbpH0a4F7q10Aj52OrnbrdPCVTnZx6ne2p7jewB+Awa/\r\nFr8IElypj7VIP/4/JajXVPNu6z3Yoycdi8y27pVuwtOONdpf9cQaNTkO7yPu\r\nJ9JIM1wO0HGkaBkkskYhvzlS6QOLsxNGQkIB/urejkggofgmQz0i64CYox+x\r\nDxfqJYM3YfuEiq6AquFSQ8rirLZZepLguTvIugskAvsBIODWVT9jmb12Gvlr\r\ntOHsmaIB+1edk16DmqQn0NG7f6vSkufpSTPO3QWnm5nboXOFgke42mHQ7vSx\r\nzMJM/3THQqy95JX5taRHCvaAljAfA+1fJGfLWQ0KPg/JOykCioi4ujdN54zy\r\nzVyQaKOVpbWEOvU+Cr/GLKecdp7pTW0qcyw=\r\n=GAt5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-499.0_1654892964346_0.6133465630713848"},"_hasShrinkwrap":false},"1.0.0-canary-1914-503.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-503.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-503.0+6b326ea","@bodiless/components":"1.0.0-canary-1914-503.0+6b326ea","@bodiless/core":"1.0.0-canary-1914-503.0+6b326ea","@bodiless/fclasses":"1.0.0-canary-1914-503.0+6b326ea","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6b326eaf06d6761a921235db4716c33557fcf603","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-503.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-0n2JWYJ85GQwAPOw+WrSCkeO3LdHRmtRpDerY9ObBhF/UNhxsB4Q3AMmblvPzLAtUenh2NYWaxCxD5k3JCx2lg==","shasum":"f029ec2a3676fd590583c8187658e70ef3f0c494","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-503.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHryZNclIRbV1CO6hr2K6CghEYA3mohtRkkqnk6L/wKJAiEA+ZVNu/ZIIpcWKEVYykDUlorKCJTjNkZrmZ6sTDvJUG8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip6ysACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCLg/+PmRP648I6auM1SW//EeA+CAfACU4K3gaX6SVWUpJZWAEgDdg\r\nmMb/zETHbCeMohaAvNhDXLucEi4c409u+eA0bsW7rV/wdWPJalon31HtYAzg\r\n8FibNNfCfSsCucPETNBc7X4Rw7EwjpT9TMq5pXul3Q1We+VfTcpj0oESAkuT\r\n82LKB4xdqQ5PYGYh2ga2bNivgtvrMFqMrQoGCPevT3YwE+bKtZpL5iE+FUeo\r\n7XEJwNgHxzFb5kzJ1/K+oEGQd4wQ87lfsgt/e9jdhV4QMx422GXgvAPV3Hoy\r\nD7wf7WQgNexKI3fsraVNAWQr9barIsOHWyH9CqJTkSVMqnYBBORFoTILophF\r\npsvgyMB9yMJ6JntzPYnlXkk6XvYh4zId3Ku0cJKju7uG9X8GQHn2gf+qLY3K\r\neEHcd3Z+lD9E+pB7ThpDsCQQT3qwtRm5y/e1X+0EC96Er4HaS0W0gMLcvQY+\r\nqKQ7LVwQV9E2Bob/rNeEHGd1miGRwWTlKoEnmaJPcMg/zBzEoZMA1WA8wHCo\r\n6+p5m8Liwl7Qc5iBT4xyNXbW9mvMwL6LctjqskBVbAjB/LtCWgQX0a+bO4c+\r\nvH8VFY9hQzObS/0sPlOtNEysCo3i4JYb24A4R6OBJ10THO3KjFWwfueBYHzs\r\n2aFVocIhuqUkRfjjJcp+VFMrocxGuK4b96s=\r\n=YIDo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-503.0_1655155884615_0.833633793549825"},"_hasShrinkwrap":false},"1.0.0-canary-1914-507.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-507.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-507.0+900ee63","@bodiless/components":"1.0.0-canary-1914-507.0+900ee63","@bodiless/core":"1.0.0-canary-1914-507.0+900ee63","@bodiless/fclasses":"1.0.0-canary-1914-507.0+900ee63","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"900ee6319e37675b6c4fbbd9be09d0a5c0f4b79d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-507.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-WTAI6yCC+FLiVLbp5MA80N9KIKqG3j0gLd+w2OVPOtgBS3+fisEWfVfg4OjbxQ6LqH5u0pJa3RIzO0aMd4GuRQ==","shasum":"c04acd83e54fcb84e5e543fc1011304a660b0760","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-507.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl4/F24ubDBkJZ3LtLfalwargDLgWsg1rby2Fq+LzFdgIgE1Vs9QUTmMW7H0ERuuaf45heo2yacQQqHiWRJKaWVOI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNb0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmocyw/+OEoWqrIe+7llNl7bGa9OcA9ZeFbe8bkH+Riz1cyOdAr+d5IC\r\neKlzMTdbMS0QffHjbOkWsu48mPc7u83XXzQ42DolXKP0eweya5ytDievgqHr\r\nF4qMbMPVn6jdCZY3MlTyah/tQEkzrFOugKuSDGaxrcVWi285OglShX1pvbei\r\nuERu/XZmiSY1B1yKRhLPYbBVZ2/FeYa2icSFpAnen73tbMXs2loGZVpqoy5O\r\nXADvwRYtVO/XXz+VMtZuLgqLNk0fHRdOLrcJH9d6bVjHciS4ptf42YegDv3F\r\n3pyUuYXmMnKzxDc5lQe+rARuWMpZMBR2nMiU6pwEM7/FQ5rb3+lVxNNfphNE\r\nuEtH61p6daUfX5k0IHByhDB3a3qroNs7paJXvjzTgnIpgpJ+24sSCVv5Xu0q\r\n2O0t6cbsBZYOMvmqdr/Pbtus2IeiqetJJw4yJWFK4+KSTTbIg/puW5GtnUwG\r\n4ktuu3BLOlf6Dst2v9sqZXdGr2m+CJITPqW5AV/VPiUmPD4vFMGC6BB8Ull5\r\n30I2w5h7Fg4pqUCDF9anRSC9UfpdGmaZ7biATmxaIuJAJGbmGK/7aHdNP/u5\r\nFdU8hZJckFEkWriMXgxKOXg1Cq9LwIhsI/hD80TZkNEs49V5cqD1x/il+TYC\r\ngv+0hj4BcJZ6kX0qhOZLcNlL/w4BmQj9+4M=\r\n=a0hG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-507.0_1655232244306_0.14377464227424608"},"_hasShrinkwrap":false},"1.0.0-canary-1914-508.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-508.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-508.0+5cffd1e","@bodiless/components":"1.0.0-canary-1914-508.0+5cffd1e","@bodiless/core":"1.0.0-canary-1914-508.0+5cffd1e","@bodiless/fclasses":"1.0.0-canary-1914-508.0+5cffd1e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"5cffd1ec6c12fb6f8f6a297642cd5f11b25cea46","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-508.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-jHhYa2ITy9AmL5RJDGGy66SEFBF0g2v7lg1zDoQXGjWwhQelHGzRNNtyyuM3fd56GCFFbh7aRw0Av6cWYRg5yA==","shasum":"d8e022e7d16adcf91e46737bf6b99c1ab8d59336","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-508.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWVHPz1XW5vAXvizZ7PhmPSO0pVa6y3A0Q5phvU6NmfAiBzw9TprOEuM0pWbP/e6H5GJSdmNCc0IeTAZldrEwqsrg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqQq0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogJw//RWTfmqlTWu7L7GRm6KUV5Vq+OD6rohZLkIXaDirDBaC28Dlz\r\nsbIcf2plkLLxtxqMlwWPIFWkZQzYOQSCxJOLsj6trWOp4Kr2s50A4TuOjBj0\r\ne0SzL60/kxUSbin+8H68TlegQa3nEllz8gYZ3YIQERSFPpvIgtIhwB923p8v\r\nbC/KtHLgeoK5RICiGGgdFrD7lTKWt1SSD/c5nYJbruVuNnML6nr0SfAVN/Br\r\nfx2qTjLEluN8KQX1teCxghvrxNZIC6t7gLe6viLq3C5RYaKGXKJ0wVpa+uac\r\nwPS4+r3p1qQhAKTYVklrWjvTFSxtJAWuEhZvyY28WkU3MUASrfhaPwkyJ6Zo\r\ntmwxQIov4H5ePb+IkQAmSBgyTEk+OovmZdRMIz00IqRtvyveKWglvi6+jVzG\r\n4ZAN/mq9IqIsJ8wz3rQdVrhPsCTUFxJ7rw1DuUBuvpuhusk5swzuuI6DWl8Q\r\nfsQFYfggzCuNTuXbsp8esKxtlhLe5QtfMQuSYgGhJDOvKr9jII91+7MBdb6r\r\ndVnesBn2GRWFONP3NLabMbyxaP5x2LPcjJsT8vpC3QwxbsuPUDNJcsUi3mVZ\r\n7fsElMr30zkKDHzNZzLwOjJ+9jnjtDiJ1yn0KhbzHM7xuiSwem2c52uZj3m6\r\nqxDvA8ukv2wHRw/buWh9RIt0efAJOE6L4Kk=\r\n=2iWO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-508.0_1655245492415_0.854363512463926"},"_hasShrinkwrap":false},"1.0.0-canary-1914-510.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-510.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-510.0+0e8c178","@bodiless/components":"1.0.0-canary-1914-510.0+0e8c178","@bodiless/core":"1.0.0-canary-1914-510.0+0e8c178","@bodiless/fclasses":"1.0.0-canary-1914-510.0+0e8c178","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0e8c178362d6af2d9cc9c6c39d96ab45c4e3c7d5","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-510.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-z5MYxCpu91YlkaAX5aWtfd825H5xEECUnI6D/rLUp6Yeu32LZw0Tfgc+K1ZUPaz15Oe88m8JxnBVOlsxnOGLng==","shasum":"76b295b861ebf3a30d48112c2aa31aac927b3ca7","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-510.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7zO1NkUwZDHfC6ADVY7g1+CDhigjyela3E4bIwBzFvQIgCQ75DHKdEpopB8IyjZRyoGgUUnWVU7CXlqRm2Op+pV0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqQrxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrENg/9FAVh27qFqSgBwso9U2DPearu7AaeFgGgUEcntCr51CYTfBmb\r\n8hjoPZ7GfPjMJo5/Pu/fCED7ZpCuw3RcGBIfTDiNVtvVSvguH9qTYmPXkYdY\r\npeej+6gy3g5pfShuDY1jTgduD6/YyFiC/RiA9LobisIM5OqUNkozLfsJNHZm\r\nJrt4UDZVJeUnYHayO5zT3EKTXRl18X5gXNN5LWx2mNUtt2qT4bWsc9B97RJs\r\nfEAzuutTfR4hTaVlDOz2tf5wPugsA5m5EXjS15JJuRRX3WSHucpAapPikxMt\r\nYCdk72sBh/VXpA2j/7Q1eTYxW+HfRT1mFJEPeSnswQ9rmZDdqB8rUDJU2Q7i\r\nQAQ90eIoK3Ckc3hyWDwWUJ5tf9Pj28w5TxjhbZezDbrx+HlIW//FokQr2yY+\r\nNOxWeRSgdH0GOzccSX1pQVv0lFmDNAeHWOQ1nsB+LtAS2gwy8Ip1mpz3+DfU\r\nz+6Yx4tCUP/Ff4wtJG5F9YUSj80EWfIYOvOV5tsnwek6E/Md97vFu41L5wtA\r\nRNcdLfAPHn+eqW4nD9WzOLClJqHiz+h8brYxRoSjQYewTSpwfLjxFQEuBmKZ\r\nOhydzSms+eClojAkyUlo9sBGf5KDgp4Qjpo2mLC79uR1GpMlO7m1HbtQHyIL\r\nWSE2PRqiwf6w0U1qoz4wU9nFDG2YNe8CkeY=\r\n=paNv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-510.0_1655245553197_0.9167619245366418"},"_hasShrinkwrap":false},"1.0.0-canary-1914-512.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-512.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-512.0+0e8c178","@bodiless/components":"1.0.0-canary-1914-512.0+0e8c178","@bodiless/core":"1.0.0-canary-1914-512.0+0e8c178","@bodiless/fclasses":"1.0.0-canary-1914-512.0+0e8c178","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0e8c178362d6af2d9cc9c6c39d96ab45c4e3c7d5","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-512.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-1TtqFBWaMhtfsPe58ZhWxnei1C7k435YCHVLwVbt0AHQ6/NQhBB9Ycw6RZfgLUOuzc175RFvvGBgOFTUbyAHuA==","shasum":"c64a915387ea61253835e11f873abc3ae6d1b914","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-512.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNAP8e1gnP3aLB2A81MV9KrUmaK9wQT7+zt24Voh+27QIgQIwGhEb5CUXgb0BebCqz9TwyjKntOrefoHcJGZXSZAw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqQzBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokIA//boWExSSzRN5oFUaTSfKqxg5963dGBfKx8E4S+WyL+W80ov4p\r\nvofXEoW6zHbMh2k+8M9plpY4yuWcdyW3e4fAhTomVJEp0Nxf7MKoqYhN5y5o\r\nh89KEbdYKxV5KA7uKLCzg8dP8/fYWX/nDSuiff89kmWDFUZ1jUQlviUdqnwW\r\nA6zyekQ8NLAoJeTSavb3raszcx4OIIxltOL+zbQvznNl7hOzF198G20/QPsN\r\neQtzVEnHdL8tZXh51NojtIqb1hDaDbVD4BUWsAXwkgApNXmHKDJNEkqdXp+c\r\nZPz3pC4lhC3qvFAaEo1u7xjUQHjrBt8oVM8E0RrHLFrbBrL+AgYd/GwhhCmK\r\nZBhm+WjTKmw1m6rqkw30mSHlmEhhLcUjRD5ra+Y6xD4b7KX2ECH6gC1Jk5V2\r\nxUlgkAs0KvYb03xurdkSQ6ej4sXu4HAMpVJKcs1ggtIFMelcDn4QTIwlG5TT\r\nMRzUwZXuewvy2O4Zs4n+buyO7YpvAjpGxq1cfXM11ymQkd9R/ZLU+1w/UfZl\r\n6k4UAWo9/mdIuNwkMISkarkqodNOAN+rhC7hweQgg6P1Q9fW7avLv6/yLXlB\r\n98RjUhiXsxDgkEL4xwxniEva1BMxJI2wj36WMzq4eWe5zQocYbmOnFqKZoh8\r\n/VT5SDlIPtWTE6gzLT8hV0n2XiaubPhf8Nw=\r\n=HDUp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-512.0_1655246017608_0.8595738976440304"},"_hasShrinkwrap":false},"1.0.0-canary-1914-521.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-521.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-521.0+c5d8e2f","@bodiless/components":"1.0.0-canary-1914-521.0+c5d8e2f","@bodiless/core":"1.0.0-canary-1914-521.0+c5d8e2f","@bodiless/fclasses":"1.0.0-canary-1914-521.0+c5d8e2f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c5d8e2f57cefb27de0bd20189bff3d44e5b695ca","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-521.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-qiBWX/5A/tQVB1iVscJvV8yQMaSHtQ8CZvO8Oan3bd8l5cL3gkrDHF6at7IvywwY3snGhxYAyFvT8xZv2ZTFAQ==","shasum":"d2e15345c393670a14201b8a2b0dd3e5865d29bd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-521.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEhynFO9cl/eN8JP/8oQTbWPBr7hZ8pd7+E9ZZo4AHM6AiEAm5S9OOfPkmkwtkraZUcuM5xqCT8NrCFkDuYhvKdO+Rk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqkQ5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBCQ/+M488VEG2HCjT+foJ52HxudF1SjQdd5qXQyya9HofXgwfpJHB\r\nblVOhnEZTJNLCqvyNRL8B8CC/FgIy/WS7Y7uYQBlAxuvOknpZG+kvBE5YMYt\r\nN5j6g+n6GDxUCUzYBVFkzbzKyGsRTYj2niPOjjYIlxhz3KokcolaAgedwkSr\r\nSpLZubXKuMqe2szgEHPUufC7T5l62O4Bnmr8Mk/Emm1s8fxkkSZ8V28SLKF4\r\niSdmlibmTzi1zA9kaEeQFUqzH0DcaCPFiNnnZ4Uj04iAE4Zfgd4yJon4v9OY\r\neQyT3Du2koQmE0RrxuQMhSpK0X6mtDw1cpnxIY46WF7JyHoLHVJa8X4rmu98\r\nktVZYykGBli3TzDHahIb/FQpkpHZDaszro7jVtzjCsreeroDVtSV5RmYuO9A\r\nFeaITfQ7yssPcJf89/+l77ZgVln6ePC2+QaFJpCgllhM0+M6F1ZJ7sEyfSsv\r\nK7Gv5rTZ3IS32oP6xpOpqwwR+y3OqBMLrt7XdtVhepr4HEAGeBvu3FwNjxXr\r\nYHQGQ8H+qV/tafPjuVQpLmKD0XD9kVduH3+nW74R4jpgu46Z343YZL4s7w3K\r\nxSOD5L3pGPOrOASmKJn7gQPGN0VyDCXUXlnmXRrwXJt3LLSh69qjvSZlRVHn\r\ndBu4L1ioUum+UGVFfRcTNwgI+qP1rupeM3A=\r\n=Abob\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-521.0_1655325753208_0.7339396883772615"},"_hasShrinkwrap":false},"1.0.0-rc.4":{"name":"@bodiless/youtube","version":"1.0.0-rc.4","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.4","@bodiless/components":"^1.0.0-rc.4","@bodiless/core":"^1.0.0-rc.4","@bodiless/fclasses":"^1.0.0-rc.4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"a9ce16b7868bf7eefedb25d7a5f88c55419df139","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.4","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-apifwlBV7UV874QPlF6kFrMrxgvJGBijSCCs3DqsyBobk9GZHaEQ2xgdrYRNIuoSgPGsSHmpBYPE0dUZD9TGGQ==","shasum":"013b714231edb1d6ef7dd0d5874a78c70db8fd6c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.4.tgz","fileCount":19,"unpackedSize":217150,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFBxKc59gIRC++zpqrkz2UtNvRvrXMm7s0rYTyky4smgIgHtpKpjoKmjTqyYn/O/0fQp/CGkb/YeQBz7l/dnkhPc8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqwJtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqt8w/+OmW2T++bSfLMhxHxAVi4NXQ1X2iXf4jFDkSxdYPRhJ26UMG3\r\nzSKO+fmkifwlb2XUrfi5UNSMVVabIOWzYryGfR8QEh/3U6MsEoz6o/QBNi3f\r\nSoptX8dpCkUaN0cExQhjc0s5q0Is4qVmY8Aqt96u3w7qpMlR0utlZcEaNXp/\r\nhACO5q6j2i9C8DFYM21b+bbfReK3BYEEGoftDqvAz+Lh1sCJfbr8OEu4BBU3\r\nBSSrWYr14XMIPNDKLIyRXALBtu7eg7So9DDIj+bggbCMJBKOViMR+q0yKMff\r\n5pgsMn4GOR/NWFhog9EqUqOyZum12BFRBwm34N1u/ye9RP9SQTZGeyOv+Ajt\r\nLHYGwx1Kh2FdHeEDSBlklB5Uw5suRXdk4gq2ZVEFq79A9LknZ1ls7d/e6PyN\r\ncm7Meh5ItZiWiD7u5QT06NeEhdMHUWG648YiHIOxr5B6pphL+7EjLCO3D4ff\r\nE+k45RYQxN7belUSQScri9nse4A7WbPu0rt/Po64tB2egsM1oZilQR3KiUcW\r\nulL10CZikRhHBeLMaaxAwkImHz0snaWrkk/wUBWBRaEpXeIysZERV/5hX9ms\r\nwrARfdwYzkf8ojjwiyJ6FXuREYVkxm2u4EwsoWrForkeAhuaSAZnLG/y9iUO\r\n1CQIauX48p0ZR0+30plWi9MrlcwpdrvhuJ4=\r\n=MFiS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.4_1655374445491_0.8591509853162895"},"_hasShrinkwrap":false},"1.0.0-rc.5":{"name":"@bodiless/youtube","version":"1.0.0-rc.5","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.5","@bodiless/components":"^1.0.0-rc.5","@bodiless/core":"^1.0.0-rc.5","@bodiless/fclasses":"^1.0.0-rc.5","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"476cde5e8da95e5e55f80e5cd2738ae654dec4b9","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.5","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-t+AQWJtustUEg06LgGwHslYz9FYWxdvRRNLGJv1KA2Z99lGmMzqUnlEygXYPy9dE0gwEdi0cnwhh0//Lc8byhQ==","shasum":"94ff2e223d558733d2abd16dbe61dcd265fa3e84","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.5.tgz","fileCount":19,"unpackedSize":217150,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEJMxyU3D9rWydPbmkPrWne8DhbfZedaOVRHlV1RP4nAiEAluAgHnyqu8P2ZTUZd9Bq4S2KyEtiob5OQZc4nsx+a0o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq04OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5fg//Z1MGwuMjiqEl6vZGaT7gKOAqg4x98MMhioHGoUZAIGlcroNU\r\nQSDGdlIQnweiDmHo3DMfWc4vBzVgYoWCrFMYjQ/E2Rz2u/h1AR1ACp9oLaUL\r\n3xtgvC+B3iAwrnvnhDfPX1TGW61P6uPnPsCaD3HVPj11pwlEHkmRFVH4+D79\r\n+8DO74yXnNi2de7I0IawKuLNYpvzDrOZgmhzV4sU8No0xHYDwHToDObCBNzX\r\nPSa8NkWh5Oci2+/c81jKfkIfNugFJ5xYWvIL3pvZdVZLRF841/4xBrieC0vc\r\nqogbS1mNN+1K9q7PTRh3Lgql+tC6ka8agQ9kn7Mj9fzFnf3knWHiA8NchgWB\r\nduYy0fqhjjl24w9ege4XTx32c4lbgq1JaHTzRIjmtqwdYDGhPSCdKHEF6A1p\r\nfPVwyHnEQjXOaI64ZphnpDHYpRfrc3ViiQKuMWLvHhqzU10qFuXQ4JLmRihi\r\n6EZJ7iTGd/rfmMWHv6PiGjk5k9sDZQk8qwxhBacZOYjsY/hkmUe/EETC9Aip\r\nCh/92kXs6URWz5G8CDJ6Ml6yX4W8OfWZS4Tk6qbJL40HsO9y1V6gi/xCFLYu\r\nbC36X442xFOoItkjNFebxo3Nfln4+WQvsLNhNRYrqEDpZ3UZeoIRVMjbuIAH\r\nsgIjEVx9yuE5zt1KSgLRJHjpM2VAXSj/vEQ=\r\n=SIDn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.5_1655393806350_0.5495616888985098"},"_hasShrinkwrap":false},"1.0.0-canary-1914-536.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-536.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-536.0+638e8c0","@bodiless/components":"1.0.0-canary-1914-536.0+638e8c0","@bodiless/core":"1.0.0-canary-1914-536.0+638e8c0","@bodiless/fclasses":"1.0.0-canary-1914-536.0+638e8c0","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"638e8c06a19c7ed6dde916f245953bc1ffcb5d51","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-536.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pCDlmvzWOcL+bGWdr/d9SHvTnzFG7fQfExjbMHEFk3dsxwMt+bmeSafOF2chWILIS/du7NJ0UButk87oXYd9yw==","shasum":"faa08b8763e8d64a02a224d807d97002a0b075be","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-536.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5BTugytG20ylk8o3yE1th08HWISumwGosFlRnQ2hf2AiEAleSjHT/kpE3B+UI8mg5J44zrUc8Ieo0Ej8qXvxCRYO0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq3hdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtvQ//Q8BJrP5ama3iRMsbOzLQhVsLCi6+IEe5QpfsL3TWJbIyrnr7\r\n8q35yTtx50MqVxeOtFT8+LZVDbo+uwGr1ISvVmgwxZHH3hjBmtJgRpjfTa25\r\nrocmyYSHsfr9ZSL70Es9F+y0hvNdo6MQYwrzx/m4CTMgmY9eeH0IMvQG7FYi\r\nJw4RSmIHBy1YlmoM6KAL/wiS04i4228+x8pPL7CM38nyRmNtAkzVk9OTeYiA\r\noiNsXG3eenZaBaU0FR3z4rus4eirGEwxdovmt/8uAIzfCHbdoL5hvaXpglYg\r\n5iv3Psueozp18jWDUjnh7Co6D+WG7bLbF65vU3zlm1hAFAU/xuUBoKNFWrUQ\r\nBltRyI8CZaVP2MQ6vymFdAWIJq8HdyhmgNXySnwCnrLKeOzKtEJCyJG88jrI\r\nm7piDHwDD9RXrS7AKGovaNmQkzhzqSZC0oTJwn/BgXShq/pRKE5tce/tyWFG\r\n4QKllWYU2Hz7xVtVmce52tCWmR9kKm4d9/G6+AJinbYGge1KDq2QPvzpnGcW\r\nStNbxcnrQB+T4Y5v4S+vmOf8J/1AyEA2vImH/f1xVlqGljIWhykrXY2EK9h+\r\n+A3MUu6R8QItlx9UT5CrW15n0mPY00tQwUQVYYc9o0Uu/zLaj8/uW7UdcG23\r\nxey6yVYXXQcgZzMAekMZgJDl3KS42ESHnwA=\r\n=O8C8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-536.0_1655404636934_0.19469013104832333"},"_hasShrinkwrap":false},"1.0.0-rc.6":{"name":"@bodiless/youtube","version":"1.0.0-rc.6","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.6","@bodiless/components":"^1.0.0-rc.6","@bodiless/core":"^1.0.0-rc.6","@bodiless/fclasses":"^1.0.0-rc.6","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e373aca19a9cc38ef4007fa4c8ec87cb2bfeeba5","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.6","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-k93XapKcnubIpSxx2ze+EycJy0UNJDGtnBjL8l0TmWx0ahlkVFopH6ZonIVdhPARoH5BbptovETrqZtypxhiLQ==","shasum":"07947abaffe9a2ed0d3ccdb2d88f0591cd39c53f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.6.tgz","fileCount":19,"unpackedSize":217150,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFYTqHHQPjDU8QU4WY2s4tNG1BghmvvJ6BdUGFXy7cYXAiEAk5bFbllKZO8LaMLyf+VvPuWgfUKrxqBuPqr7cxQUadI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq3uBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmojqg/+MLNky9eXbg0kvCvi2gRB1CfMdiJ7dn9EXWbpQedv68HKUb4A\r\nDKB6VpRO/H2JStDypepcySbvyHum2ws/Vz9Hudc31eytJ4tY+p/g39nWZMAz\r\na7mxYAsJmlqUAU5R/Z7LXkDkd2Ifl1lN5gZwHVXWGsWk6NayTrF5Af9yVKqb\r\nlGgKNR/SIkxpu0sBGOvV3qnQVApYVvYVXl9BzGU81x51BKJ09Jvk0QnnxPnL\r\nq0GqsaZLH6Rf22qh0UvDmWpGq+bYCjt8jBF2sJoJ5k6679iuR0zF98E2rFoQ\r\nLKbWjPtTKmQS5WBqGdx4JFKUSp0ps84a5n+SnWfT+4aaJ64MJyF+LXzNsi2L\r\n+4oQUq471uqUgHJWZ+iepfGazpXkCCcAU/d/4t4QzUT0XV/HXDquFnoZm9KL\r\nq08w4IWJRlYJqa7hzhsyfwaZsb+vWU+0BDoDl3WN7XrJDzJ+xuxiJbTyxV4Y\r\nTD0pCMu1NYfDalRACROFyHRjKSCgApN2ppAK1bMO7+nbtHbba3cjRmk60LpW\r\nOGIG+V6y0uXgUW0GUDZWGrTqYeq+efqiWqLFJDEyZxw7QSUJOhpZ3yua3KU8\r\nm4U/oRNQ3Iqpzf2pmT8q/2ceVBIpi9H+W1g7I+XO9rL4VwL7daGbYKIx42IH\r\n6OK9tQNGllk8ilw4ki9AE+ZBx81WwileaZ0=\r\n=GSgs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.6_1655405441076_0.11532444995378999"},"_hasShrinkwrap":false},"1.0.0-canary-1914-537.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-537.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-537.0+9c901cb","@bodiless/components":"1.0.0-canary-1914-537.0+9c901cb","@bodiless/core":"1.0.0-canary-1914-537.0+9c901cb","@bodiless/fclasses":"1.0.0-canary-1914-537.0+9c901cb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"9c901cba31a02008486ad85c087cce3f37b3b69e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-537.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-hDcgCm1wv0kQeKpfVwlbZLPbOh8nenv/W+GA+mXaSRJJ1gIq3p7ZSyyLfU/jZd6vPaux/hzMoNink8IAxamEIA==","shasum":"0fc49fd1ac7afc87c55dc0130ca486b25d5c8ed6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-537.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCna2RpJes6oaOW2XNVOxu8yIi36gvcoqtGIWC5dZliZgIgRKWHZdA1YldDMCvir0bxpawk8Q7AMtpFfWz5Ws805wA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq3xIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkBQ//Q8eAvBNHUBoPh9TFl0yu0R0OLuWrPFljdKr68/8C1j34eNTF\r\nqNDm4zbdHMqqM7vnjfJFE/1ZC6t6CW/plyVa55vHBHS47eKaUlvMMgmAffx6\r\nuMHPEnnJxOEz2bDuwQV7pX8bghfOqI0d3v35278+IZ5hghBCnfdWTxK2kmDE\r\n/OFWKFiQ+5QQ5nDhW0syZim7M8fHKDbJtN2FhZ4qin1Bd6hEf5XMHpVwetQX\r\nmWXB16UfzLWbwKp9VjiuS6785FYbvxhyVFdp4/BVqqtiu6Ft+7Pe34F5aHUn\r\nMgrT/AqEdJHAyyJGsS9SkhQhg/Hw31Ljp1IhfU0+X5K6mQ6ilA07Uj/dbHd9\r\nXih1MKt947L3kSfcgbiuAMCpADB8uNKxq9Bxr8IxLg9qBhYrAbGW76rPJVh9\r\n3/JDQJRJCkvC/YBgPTqGgX/6pTRnh/ajcRDmqYd4WQYlviYuy2E4kBcADF55\r\nUu9/q65/5F1GNzocHssU/pMX3uufjhfTqRy0f5AJPyeg66GOgbeRiwF6O07Q\r\nx8hAo/m+jNHTWBfRU7M1qxZXTVsOjFd8wgfs72fPRR1Mub0gm/MlbTtOW0oP\r\nD2QlAzSmEWqF4zuCbNTvshREQlTzVziIwXmsKvWY/9yeHuVjBNcKaxGIqMy+\r\n9XinGekHIjNCp9zN2M3QkHKpeml9Aeq9Z6w=\r\n=jKP8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-537.0_1655405640462_0.4887380013969762"},"_hasShrinkwrap":false},"1.0.0-canary-1914-538.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-538.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-538.0+370818d","@bodiless/components":"1.0.0-canary-1914-538.0+370818d","@bodiless/core":"1.0.0-canary-1914-538.0+370818d","@bodiless/fclasses":"1.0.0-canary-1914-538.0+370818d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"370818d3ee4d9d88c373326c858ffcab378c891b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-538.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-umgp5ebBh105heyVd4fJ3Ykv1vH7UFpAOzzpbzY4nH5JevTzbaE6Q147REtyr/CuNoZXYAjILHct/gqUov9SDw==","shasum":"fc4369c791a4e5f03c48e8de8760d432377f929e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-538.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKMCVSQWoc1Eq7xXyNTYSpoLjPDwZAxZFx0VnjqNpq2AiAOjJlD1b4I91cL7VYO0rt00bkh7YAi1Fa9arxaSqiq0g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq4FBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3fg//XEJlF7R4wi63sCuJVEKKgqA9qLIhH27hYZDBwE9qfUyMz/PZ\r\nKXvIhJtGc9O3TFW3KxbWLAG7zv+0poNX9UpEZXk5Mf1etgMeYU9mCEAxNsNt\r\nxcTC6qvqqz9tya/UEnp35nWGyC6raZAqk0zhZa5k+n2bBREnTwf7+UE9MD0L\r\nGQ4qcTTr+eQptiPwYh/hRyYtE+Nybr81pWoNJi6DGwYedf7fM6t8Kw/LoVgn\r\nHejPf8pRN3XIGUwLiSrzM0QnpUtlF6UY4l1sBLib//AZDQJmqsNdxNrNriQg\r\ngPLr80Smzl+pC8HMuU/qETgGEzrNTKSxVXMup1eNk6/higMba9MuiZqUnSni\r\nqYrNfAS95lsl/3KJMi88pGUrwxQbc3bIDB3FGA8rY+l2FJEPHVCHgEU9D6cn\r\naMEMJ0ImYtS15MBpRbVFk8jjcB5YITgTZ4f2Qm0oL02aOfkL7WRfSVpwsSRq\r\nNz02achwEay6Jk4mXkQh/lPl4uNrsbKLlxdKCOpSWvGYRX4lIhiSKU1g1d0v\r\nUDTbIje51YA9cS3Ffp2Qc1USrcYnNiij1GjvXM9pPT3oWEk+DdZ07YwivMr1\r\n2yGZu3aOcjA1wA6ZlkL/5DN+tHpEKdxGWrO9jYpf/pv0a4EHqDukTy3qGFSu\r\n+znypgLMsYgf5pWJeWYL38v+AtUm8RdxecY=\r\n=ANPy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-538.0_1655406913053_0.9975715699122161"},"_hasShrinkwrap":false},"1.0.0-rc.7":{"name":"@bodiless/youtube","version":"1.0.0-rc.7","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.7","@bodiless/components":"^1.0.0-rc.7","@bodiless/core":"^1.0.0-rc.7","@bodiless/fclasses":"^1.0.0-rc.7","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3a983fef063746b06aa6e1c43f47207efd5daefe","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.7","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-WFU/QXTdrCguEivDBHADvKw8CvziSrfhp2VfCFTcbbr6D03mYx/qSql38MYW57+tcvn3HexuXUZPgkEqP5vEWA==","shasum":"d699da00272d9cfe88b6f1495da2042680b2cdf0","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.7.tgz","fileCount":19,"unpackedSize":217150,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuiuZMmrJfEWTGT1BAlrv5fDE0c94t9ha8UYEZL/YB1wIgGE2vgTwVs2vxzKDYQHRQeQZ5OnipCsPrTDpxS6IDmgk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirIrbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK/w//XDWcsk3RdMJJ+rwT32l2ylUvUB7lTFFoD6OngMPbLCdQiKj+\r\nfueb2GWNySI2k3UxkbmLHXdPd5okYBdrKDQmN5Ym6rqHFBjATocvhP7c5flk\r\nH9zYLSrOxYK1Tgn9eBsymwNjkVO+EKDPZJkBaOQfmKIsbzp962boqjqF1mq7\r\nu/LHHDJTu3LEjO5MPV4Nfoc/nVIWQpg4f2+RgxIEJpYFjeZdVFXpmVJEL48Z\r\n5qa/1V51Bcb7D7kRQWykYSbFZIffpTmc4UFtBNEU4pQKSmI8yOX6XT7/sf2n\r\nv/nYsAXvvekdIsS9RoSLwmLIEGI06ysoeId0VfhotYrSjj9X+hvvJnvJvlUZ\r\nvHaUuRjID9DD86DcGY4+4azIZfLT9GR42WG76PIeATtnn1Z3GPydXSkTPMRX\r\n0JYHyNZoFAoHDf+3R1clOeHDIWoDCE0nu2rj6iaXr78lxO2+OaCpQ75u7z6u\r\nYaxlQWtfz9IRiONIbCMCl3UKNxTdJcWAutTdWZQjCQUyZ9UJpCYB5xrpsuhs\r\nwhnQjvUpJSmnjGnqHsTaWseZvZIuPxlkcEzcdJYLiv+sp25wMIWmVsg7gHIA\r\nwW+XXJAIBNsKw5S9eY9cKFAEi/gSHY8AWQEix0r7TNZslncigGP4jNM9vBd7\r\nrjBORpYRI0Ifqr4uy4wdptnN4VxpV4GVIwE=\r\n=zgG8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.7_1655474907347_0.9026565836997806"},"_hasShrinkwrap":false},"1.0.0-canary-1914-543.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1914-543.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1914-543.0+905a2e3","@bodiless/components":"1.0.0-canary-1914-543.0+905a2e3","@bodiless/core":"1.0.0-canary-1914-543.0+905a2e3","@bodiless/fclasses":"1.0.0-canary-1914-543.0+905a2e3","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"905a2e3cadf6109f5292c9346b9f4da41b034737","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1914-543.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-+LaJgOQzymF43+kCrATyMtiPGWIutkflbd1FVKbb2Oi5gXlXLCIrTaJs+dwNn9L3H4t9x7xRElAHcO5eqzg/0w==","shasum":"19009ee5a05654531522b6e6495434a28f365bba","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1914-543.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD10ZpPqv8PbO8kPxm0Hpp2okcbwHqHE0qdHiIW1AWiqAIhAIQsiQ68WKSmpRMkD6M63KzKT/FBeVZC/D0i/1jMPcaR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirJJ+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzGQ//dO/C7j5g1GtB5yGtIN60e/YCmZ7fMSnzmsZDVp9wQYHXDEGc\r\nEI6tv4kUcaTT1MT9y5/PKiUhETkF5fb/P/hncrPsQj0cYl/PburlwnqRkh6X\r\n9T9HptSOBd8x4lU8dfXxLlE1RTxpPbJnxbC8nBSOe/tFPBWq2W9MXS2GuUJh\r\nHkC+sE4W6yp3P3lUpXW5Lg//FHwAH6xmpm6W9+Ksl5RxxIJH9qKR9ek3hXWS\r\neviQ8rKn9W6Vbju8dJg0qE9ybTbsEGYls+5KMc2Kcd0At8I/cy5hpnhDByAS\r\nsWOXTblh0qyPqIhE+MVMPP9NJcJ1wGJiTyGYlVwgc3YtSuw/E4RrK/JO8ycs\r\nn5jdV8UD7Y9Sxlr699JXCEIql19HodF97dnnfSr1ZhJyse9ChGzcZC4NVQyA\r\nH1uZooF+CcMsu5vcA3n+zmeW3pjwrmprsda/5mgUeg+gqIMT8VoKLRyKjdAk\r\nMBccxt2VI4eSP7hjP3yfcisAZeBgcUWVRpT8NmaK9MZep8L+XNW5Gcc0r5F7\r\n0XIQWAARSvyEEOKnW6c/An4DvRjAycASas3cDIzz58Ur0mpKzdjFd+aBoQ+G\r\n62CzfLZ3q83Q3/oAxNUHRZeMxY7eiHs2QhPtsdHaYbWfHj3WVk42sfyVctch\r\nxkQyJ2enpVKf3FUaSO65Bh3s9tAaFVe601M=\r\n=2cVy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1914-543.0_1655476862673_0.6172714576098692"},"_hasShrinkwrap":false},"1.0.0-canary-1916-547.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1916-547.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1916-547.0+06d01bb","@bodiless/components":"1.0.0-canary-1916-547.0+06d01bb","@bodiless/core":"1.0.0-canary-1916-547.0+06d01bb","@bodiless/fclasses":"1.0.0-canary-1916-547.0+06d01bb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"06d01bbe6b5740a99f9ebb9890a2426e6671b7e3","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1916-547.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-yc0blG4u3e2gKndk79RRf6Lx6Jsyy7zF+ubUHdjT66gX18DH9A36fmL7RXwX/80yn7Hr4q6r2Yl3IGeN1pvkLw==","shasum":"780f6858ebca9a7bcb95536077fef2c906870992","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1916-547.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqpgOHUzDg20VDjVj3JOKnT3y0rZuEaTnOzDE6Cx8KiwIhALmj9WCa+dnZKun/18VPnt/ZdqNREQ3R7Go2KKxWaJZt"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirLSDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJeg/9HVqzuas5qzxWQCEt6YGgfhkrO9ytvxSM4q8HZ5kU4IRa653s\r\nQjONW/gi466DVpXMmDYq0w3el01t+916WF1O5G1al9PrrqPE8yrAjF5dGb1R\r\n1Hq2P6HfRxr0A7kFWPQJk923EY4Zk2Y4XV0c2RiAtsA/kVmHyNzLO9NF0D2r\r\njmnTbsKtmVulZz6HKD2tArp/OPt9P9atHmEeRuPXsQDq23rPr0cSkF3x+l+2\r\nscsdbwgWqqVEEMgZQhcGOMk+jcGD6acFFQJ++kiXPT4IvTi/S9ITfI1fhiqZ\r\n2H06xfoHAwVwpo9qlm8sc855oYPUDsHFxqYgT8paGD6julgCq9s1cEWu5gGK\r\njH4C/Ht/u+O7W+xrvZTi/W+OBRY4KERTIeZJr8PGEzpVc27CKnm1UruWD/2u\r\nykryw3/DuSSAybUR3IwldDLXdZCY+AUyiXSnNai6R8N2NGmfpvhkcAKEjevN\r\n0r6YYAWdZeIGjTM9rd7kBgE8hoZb0qgcvLudrnmRTJvhXLs547Gg4hpXiwGg\r\nHN99WMl25LX25sK+7xDS2SHIXS/WBC9D0/apb/lGplIGxyPmWBr+ftD54fP3\r\nN1YJkU/uRr+zd+kWaXf/qx72z51J7NHD58tsuRBpfTp1hIb0k5mUNnjeizdl\r\nDP/kYvY4s9c8oJXV+dbdW2/Fmw5/72QMLow=\r\n=0M4w\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1916-547.0_1655485571437_0.007231935653893684"},"_hasShrinkwrap":false},"1.0.0-canary-1916-551.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1916-551.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1916-551.0+93a66c4","@bodiless/components":"1.0.0-canary-1916-551.0+93a66c4","@bodiless/core":"1.0.0-canary-1916-551.0+93a66c4","@bodiless/fclasses":"1.0.0-canary-1916-551.0+93a66c4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"93a66c4a9f9406f5c97dcb753da9ba78fc035e03","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1916-551.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-uebcB77uRmg/W/NA+BapX2LbC0V8nFjAeTTdERv5+fkITQ2E81SplACksgYf33wr40HhV1YS2wMxw/rBskgObg==","shasum":"aba356f8e588e23e60afc4b65df5769e24098ccd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1916-551.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSVhkBFKaBrIOTBmle7lS/xWuzafb8z9IGNFLcRIzPKAiEAyFfOm/Ii81MBbi409aVOx1pKEKCz5jn1hENTOHoyfLQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitICSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoV8hAAgyeoEZGO+3yujrLFKw4iMZDsXhtraCCqbcFHPg1JoqB6uWvh\r\nkarXwI/NLwwErY/2LdTAiddB6wHctYxk4oDOcE1CCa82WYyyZBwMQLuLFlKb\r\nffmEgnl+LVO/yOzGbxixt046gjdrl9wgkLCJB3cppjIgnakpL8eSufbcYRFw\r\nGym3/YIO5UHOO3narNqzvhPvyI/vY/VHNluM2VdboxDbV/s3rUYO4s8kwwz9\r\nJ3A/o97SqWm97JFu8oxBqLLrBj6u7cNIbKSKdXwU9exRf4IZvoz+IozXoayK\r\nAFmtwQi0SlLboZLa9fTAjPVHFsqh1RqvWNXXxD+SwmO0GYejYVWV1s4vwpb8\r\nUL+R4MKV4ePGH0bbdGDDe75bVKuEU+dzQF5OxcrUbsX6xajXHtrOtp1lCFji\r\nQ9f3CzmlOXiUx8OLibKBL68RfDSU/vM3t1xej9/rBc5Bxi6rZsrNdHEMtqWB\r\nYk5GwCU1sLXvwTvyURwa4OhHsNmwer8e1M/vTPgDA19JVZ+QxAgC8IWP7vDJ\r\nc/gJLWoOe33gSCH1p0DH78edX6xKii5Yrb9YehAOPkplf807V8Wx6bEzLhkc\r\nsYBhs6OJoiPp5CIP4nTNHV7cEeocQ843l8GAZ96iSFmobGvqylPvN6LaBC+v\r\nWmnRb1j2M4/rk3Je4iWUGgyDTXMiBRUZ6wg=\r\n=xWKz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1916-551.0_1655996561827_0.9607814109924373"},"_hasShrinkwrap":false},"1.0.0-rc.8":{"name":"@bodiless/youtube","version":"1.0.0-rc.8","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.8","@bodiless/components":"^1.0.0-rc.8","@bodiless/core":"^1.0.0-rc.8","@bodiless/fclasses":"^1.0.0-rc.8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0d3b395c21478dbe3a9047e862e3a198967ed4ed","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.8","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-sDIVUiqnnMr+3BpyziEeXYO5KQQsCo4RBtqdzyI9XfSKLWQdKIevAzi17CmKoTQq6tjVv6jDUTBwJhH5ICvAig==","shasum":"8e23e076073f583439e7ee56f3373fa96d3894d1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.8.tgz","fileCount":19,"unpackedSize":217150,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEIV70Urq/6VU08RiG/DJ6sTHPx4AAYjbwrDUJxMontnAiEAzHI3xVF7oSvq8L8+nUie0ZL61Hp0T+IGiV84ZgII0MM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitMKlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpc0w//azxE5ieBKDycAPZIgTo+rGbfL3dUu1yTupB/1vvA33VJi6cR\r\n+CqzJ1J6nOsmBMPBP+1nfOG0Gpzi9BAgVl7LttdsTcNkqy4rHPMmTDwLZsmA\r\nD7s0lO4ndbdJ2E3vPf+sn2bCdmAxpCVPeIaXKWTSa8KXZ7aoQtk99qqeiBzB\r\nwYQgmtZ9iziczfwXdLq49IVUJZ1kajISCs58gXm/DV+nsMVCMGHmEzT9noG5\r\nsZVtf3iRlQoxRW8K1g7fKT1ywtLqYxe3JFe0Pb5y/l6H0JcJlyqQh/V2wYc5\r\nTqEIIbihFZp9dILRWVX6mQTuRrbA2tlHac+s+f3Lr9cCUiKzPj33x8nIDGvX\r\nAcTcecUvt6YSW9DIDsUZFr2igC4oZISu7ADV1ZCB9mq2S0WIn5rGgZVUjUYW\r\nuDQzVTNASGFesHTSJ3hNr3urd4GMJxtcB+uW8cijiWCdbhvw/MJP/cw4+VV7\r\nsLlH8ysnUg1F6a+mwkgh/psRb9GiV9KzFYD6tF8uhrxgkqJknflqREJ3TKP5\r\ny0rkvb7yWlix53Uj+/pHf9VWN00TdeKuOcPMiYw+ixZ4g/sfuRhN56nwi+WD\r\n1Lc9hGejJ68s2r2Baa5AsQ81rK3HZnbpVNYtYIUmn4HFCkBPQOW3TtAF3Pg5\r\n567tkENSQMcfz1cBOd9dYkjcBiPyX43SQFM=\r\n=aJ8I\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.8_1656013477452_0.7429792984852837"},"_hasShrinkwrap":false},"1.0.0-rc.9":{"name":"@bodiless/youtube","version":"1.0.0-rc.9","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.9","@bodiless/components":"^1.0.0-rc.9","@bodiless/core":"^1.0.0-rc.9","@bodiless/fclasses":"^1.0.0-rc.9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1f949f4722fad094e3f9094e34c3724ef5d9f784","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.9","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-WCENgdiaUr2d7JFUGZqXmdFmC07+xSmNwVVjSFfra5nsmrAgB6DP/4uJaotCIE0hb/4+cya3DLLAJWZ4MKIdnA==","shasum":"a0c9de324875c2435d9da62dc917b599a96f4a13","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.9.tgz","fileCount":19,"unpackedSize":217150,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxLqVEvpYaLhcnqyutwzRFMJIML637ouZLY1yykI5KvAIgesEExBM43EIWG/+C+6pQq56IDk4TeYcRtgo37qYUxJQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiucTTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWmRAAmBr+SJ2EA6ulzH4pEiaTSrNf0y7XBMBBHU6uTLmNOShyNN7V\r\noLZW4rfo2R3ykPtAtTvWV+KaaxX9jTb4rQFn+sa5FKZek6YERB8CieDRWu5c\r\nstc8sBmwvBwXbut51ztkVDuuNUvYjtxAcFBma3IKYGog/4ONv8873Le/Mwhs\r\nqAKHBo8Eib1jmpOkomgH/g6F/SoeOrdU3oGrNr2u2wUP7V9w2HBAWXdHC22G\r\nw4w5lwBQBkhiAaq4lzQg9JZML7GDz7to+cYYQRBv2Hy2COR9ZmBO/KHIrhcv\r\nsNH65Haby75s56X52vG8Wju20LMRnKs1kt4V4RBzWypwoR3kZ11uUXjbTUN9\r\nn5sWxHZ7GCuhCTArq4FNoXhAt4VT0yK7pVo8WrbQFegomOvFv2Prwz0MbFkK\r\nbzuPyCWCP//ZZGdA3MJXoCsfyHJXdddqs3L5WeaQDzEHgLanjTLDCeTIOBGp\r\noKO3f8Eoj1JfQF3OWEcUqrJgKmiJ12CUv9xIOh19toX4hRoRxoDIOHSKKnIW\r\nWLWdyUcXudwje7f0rhkFJYhUVw6SHO3OqhOSOmsVYZU57EMuRl9n0OX6mI3q\r\nZIpGMJYAK3G1LxevF2GsqFAS9+QrsUhWFN1ddY7sOklyAbSW2iYfosX54iTY\r\nP8e/aUw6Nps2/tP8J/zymrihKN2KgP7IsX4=\r\n=aHtD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.9_1656341715029_0.5199924213041427"},"_hasShrinkwrap":false},"1.0.0-rc.10":{"name":"@bodiless/youtube","version":"1.0.0-rc.10","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.10","@bodiless/components":"^1.0.0-rc.10","@bodiless/core":"^1.0.0-rc.10","@bodiless/fclasses":"^1.0.0-rc.10","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0ac17b652a85d5ec95a7eb31058edf9c78c0a1c5","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.10","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-a/mXPqMxXPEgcmd7sR/pvpCFqTJi9kr712jaBfCApu4oVdQijhb0zB/9gCexB0atNvD/QfI5h64buL/6Uz/t/Q==","shasum":"20e5c3d057c87b93a5fbac77f6e6cceb6688b8bb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.10.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7Yfgq1jlRFfuKkPrYH3RiOiqCpXaC5UZohkiOE7T/QAiBEoOwW1L03yOl7wSMgZi4em9XRghLeDZBkupfr2CG0Jw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiu03hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNPhAAmYPpeRJ7DC12AgZ6d0OeEtEoOpTdzfB5lFK1WUqZVAr69sub\r\n85SOCOR5zYVsWNS+bn23cPN23RY9v0WBsHmSXUzpNMC0uPjpmV1rQacqk5BE\r\nnSA/KjyxEHe1IJ7x50T+i4NXt6ylMbTA26Grzy7Gw6ux6hY1XJ4S+Jb0+yTT\r\nMxlXb+j/rM8SqXd0gYdUbq9l+fcVghetTJSfk6hg8y7tZgZ2PmKzE86ieeCV\r\nInQFKuJlrVTijFNvTeW33Yhs079D2/dnOXhinsUMevFQcREd6hTQI4o76U5b\r\ntnxQXv1N12I4fv3FFnJK2ooG+rP16ntJuwiqzO3bihSlawDMkXzbUobQY8qS\r\n3BgOOIEHrImv39QAuQt/sN1E/vJuURRpg4FtD1jl8Tw0L69v5yZrrTQvPzmD\r\nzg6JB1I5WNphSGuBqSQjf4Wl3jFiGn5JEJe3li2k9XxjBWD8BRqseMTp6zmh\r\nC/2a2844fuL3IE9uRPAoLpG7hw1fJWenZ+MnhYi0lGuyQqa9vdUDPWtblrs8\r\nTxXeRyed/T/v4qkJebdeh0wSg4mshpsoEKHS+GMZLdQpv5JsB3v9N02b2SXW\r\nY2XuDnQ+NbTDUnGfG3tunKuXj6lRrlTu1hqQMAIkYZ/NhnR9LfVJv/X2HpFY\r\nx1pH24HG+jfTEjX5F/HN0tH/DzWwfhjfemY=\r\n=fP/D\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.10_1656442337632_0.3988082022397501"},"_hasShrinkwrap":false},"1.0.0-canary-1934-572.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1934-572.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1934-572.0+4494fc2","@bodiless/components":"1.0.0-canary-1934-572.0+4494fc2","@bodiless/core":"1.0.0-canary-1934-572.0+4494fc2","@bodiless/fclasses":"1.0.0-canary-1934-572.0+4494fc2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4494fc2dd6f9093101e1b5bb48a3d89ee791c29f","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1934-572.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-p4UCAeWshgWNoRRK5/gDim2jglW7cSDtMRIm9nM8qR6tbzFQhI/UqSKxidy/kRWuIx9qfsUeiEGhr1lj6/pP1A==","shasum":"0e440996d552c36ab71ab2b99bd5137182998505","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1934-572.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDF3kWuYTJMRCeCbgOOJjvm32ORumx/XhKGZxfa9+rtlAiEA8iMJvB2zgpIfNC9palQlJdAh1sjjsxMJ2xRDMZ9R5Bo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixEz2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHag//VXyKHjWPwlrYPgyGt2mYzS4AZJn79buTAH/29w5eU7sberYJ\r\nVargWTlZKbGANtLpPOD9FZLL2vP2G2rARdJ2N64F4yKk2XExKA2uQeNixLSn\r\ng9S5ydupt0k4ulhvyhsjOmwoxj6dNAJ7nku6O9TDSxvwDScsD6L1Ji0pmZlS\r\nlf/wCRns6KisZt5SEf3PtgmRstj6DVAXoO1RgggJpfrq1QGCzqPGouYw9mar\r\n71sgntQNef29+Z7PRcrqKgnlgRmBix5CtYQipME2yVpd7hpr7aHeJ6mPTgdU\r\nltrfp2MDEsuplBDlGuvy4BYYBO1ldbe8UVYFnmCIRS8f7y6C0DTUOr48i9fD\r\n/bJVBfD5UDSGLrkYTA3ThTnD6OKmwLyYOGOii2TaxCgBwLDPNwU7e96/yzPf\r\nlt2W8yJNWeeiMueBXUpDfb24RqvuEbn8suqtfuUoXGUELvqoygz8Tu7rTRPi\r\nGIGi/2h/3wp7iOA548Qwsssda4bp74whpPtdpD+jAEZpyGEd+uz/L3T40aMO\r\n+/W1GoDVOad4yB+8Nzl8j4jO4rN0yiFg8+hKKX8BFFtPtTrxkpOFzSBRMIl5\r\naFD2eLT0+jZw7tJvpo3yA3JqgKyJ+SP3C2JT56NyXqJO/IChCsr1PTLjMkVC\r\nQy6g93U0qTBuvWGdeMSUi85iMV2Q4ceiHfs=\r\n=bql2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1934-572.0_1657031925900_0.9192171321777656"},"_hasShrinkwrap":false},"1.0.0-rc.12":{"name":"@bodiless/youtube","version":"1.0.0-rc.12","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.12","@bodiless/components":"^1.0.0-rc.12","@bodiless/core":"^1.0.0-rc.12","@bodiless/fclasses":"^1.0.0-rc.12","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"9f51a660cc1f251a0fac980871fe33c045c7e86e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.12","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-jqb7F1jQs+TuVZFBjAXO1FKMHNQR6KzktPxc0PRUvutm5ki2SkrphFkCJO3oYC6cSFe8CXy/v3GuJXTBoqUy1g==","shasum":"d66590b89b4e57e244593d31ee9fd5d7500384cf","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.12.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtZI+mzZS5NK50d9Vgfb5YTRVeDUA81SveJnxzIJtE2AiASjKTOd+kU0zeR6SvvoTpzD4D0aZYjElB+xCRFXpZF+A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiyE7+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5ZQ/+L5MBnL9yEUODVUz2RNeWPX7ny6ksMcsTelZYyUXZLvOu9tRT\r\nynw0jWawtrxZGupPA+FKlxpR0dC0yIYnnD1+yrdRpAxvXCnFQcqHM9yUzX8C\r\nTUQmMSrm+ozTkobB32DiyLDrTnRPPJGNJP7fre8VLa6UgUqbu9ULIAUU+qu1\r\n6R02piIUxiiBNUgBG+KfHZWrDFZ/aLOU6RzvAKJmChh4vHvfhwSJawQ5GMsV\r\ndAhMgvtmI/0DqDq4P96pbXrsK2jBz6bdJfk4Sq9K3uWUtzenNwR6VABSM3aa\r\nhHX+XciE3Dwv9hyppwEIHxvPpWyVBS5BPoZQlD6w2RIC89t1IbKEgU5iqzML\r\nEfT6NcOHCoDm8totebn7/lGjnapG/pQ6Ra+4T7nGWPqEn3DcpgplbvMhyef0\r\nfeYNortHs7wy1agOMlDwWvYtf/TIyb8xX3TntV3yT1DrkaR99iZfO4QiI53M\r\nxTLxmdmzkETTppv75wizibBGa4kd4vqdnqV68nNzJ+ovAdavd3AJwhEhzwiA\r\nv0Q6isxjgaxmx5dHrmsle9sSmAO+2XyAExBGL4froP42A3bPRcdYgMDLYAhO\r\nwEmVB+8RDAwmn7C/FOEryN1LwRnFVlk+2YtanPFIsh1neajAaeJVnMdFvnyk\r\nsUpqu0Ip34YBh6gl2BGfUdNXX8rSkQGrSco=\r\n=rC95\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.12_1657294589912_0.09170282477452374"},"_hasShrinkwrap":false},"1.0.0-rc.13":{"name":"@bodiless/youtube","version":"1.0.0-rc.13","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.13","@bodiless/components":"^1.0.0-rc.13","@bodiless/core":"^1.0.0-rc.13","@bodiless/fclasses":"^1.0.0-rc.13","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6de48110b7895e7f3abacc9472db991bf5ca3715","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.13","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pPUqh5pxft9UvJXYwWCNd7GO1W403xP9fTJj07Yz5JSw7wjhHHfVfOOdnInYHOhUEd4Zs+UqjP2vPrJbSGf2kg==","shasum":"fb3ccf98585f676d46866027933f78d88b99605e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.13.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGca4u5dgMRVm562WbW8wWwtCCRWfY2wydG5K8I+sOvFAiEAxXEazY4L2T+7w/cgA+anxY2BAP+8YTIt4x/ZxLoyPiM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6BizACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjCg/+J8XfQr/4LRcfF5vXXGNVhZT0WtGUBRi53Iq7+B6GCfxREGPN\r\nArXMPoooI5nvsqMXlnYwCK0eMirpFiaYP2k0hRXVBHUsseAStBTWBuhYLPLV\r\nhNFlLmAricckorNtD+QIRZt9pHcpDE1ycKbMsUdSsNhCqHZzjP8IIgdxDBiM\r\nA1CK83MVG3uldTudgzAOZSIQB2lSBTNGplow3Y1T2+ryqRjcJLBsjnqAGwlH\r\naq98OmIJ2HRESihlV+OKGG7/kNgiRkMTvkLTKsq9483vf2F7owiJnIHloHHt\r\nKhN0o3PZcJjnH5296RXbM9akLYxJad+JNgZyIHWuEONFB3ylBzqw5lkuIcB+\r\nMsYOaZDY4oEIAdUObxsW0PqQt6pn0Gf/VaetgtfCTrC8VaEdYV65d6PB/H0D\r\nxyDzShG7kb1Onn6HlP7vD0Fl03m5xP6u/apBa3eyzvZijfbdMMIsT2rKBgnE\r\nQLNiU1XTNnX/PMy9DRBZE7pUCzKXJMl51RgoOuZt5D4llvktXKCVCSsBqmQ2\r\nKGAHm5qGIIAEnDyPhs7AKdVTsc30PYG36M8GeIiQ22FTpBxwZz69p4K0qaBY\r\nDqjqy9pQo0/ulBiiWwZRW23S9JaEnNEShS6KV/GRs1npq3n/eYY6YuBZ1RF8\r\n+OApJt257JFHQ7d3nxatSSBT57ht164gNZs=\r\n=FG+V\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.13_1659377843045_0.8780275095217958"},"_hasShrinkwrap":false},"1.0.0-rc.14":{"name":"@bodiless/youtube","version":"1.0.0-rc.14","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.14","@bodiless/components":"^1.0.0-rc.14","@bodiless/core":"^1.0.0-rc.14","@bodiless/fclasses":"^1.0.0-rc.14","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f5a521790763084d95c0820b52314105507f7fb7","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.14","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-GVkLiDEoHsHxDv0ilJ4X0jYQroJ+dP9voqaDvBh4GzpZmfBOvQfl2MQSOEMAH953kc/9a8sBM+Mp8mkjg7x4Jg==","shasum":"27e4c33b246d9f75142383d1fe7f63f350f599de","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.14.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsE90HhMW8orni0RaEMk/AP8Y/w3Av7w1mY7EHXhWUwAiBCvJVCTXcr/GhfWPTggqAQSYVevJq5SjcHJeM6lgBfmw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi+8LYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozQw//aCiqTkNdTy4sE4kJUUizJFmUE8egYId0QRIq3jHAcrl3izFW\r\no+/diYeZqnbGTlft73OX4TY92rQzC4Iqru29cxwkUD+hz+K5JhBB7e/B79h3\r\nLPd/YG7n9XxuPNsB+W3GpR/DzEnnJuBrIMWVqCNmmRDpsqJGl9gOPb6G/MdL\r\nw7BTMSuM8cZ3uH7JfYZiMj1khhRG26bAVMkfZAF29/M2D+P0nAx7q3YDJ1rt\r\nqVmUI7yfb9Rje9v1UsaLMn+m00ldfAyrPkhRz+fAHIQp2Y73/ftimEw083jh\r\nu2XSLK5rwRqPnuaqi+ilbZpCZoxUdHo39uDJ8tZrXlexjwyu3xFI4nxpcUdw\r\nmFSK6YAlYTjm+rX5FwsF5MYgaQF3HaSwbpZDJIeW420pHOPWFjABL5DFQTOi\r\n136ooXQEbV/B0LrzNvDVJC2TKU5Z1ZWbQIYWNa+UB7cRX20l1cDuonuxZ30f\r\nVtcSQRXz+utUeMeL6XQ/70N2xVNGAu+Hr0Wh6wiM4p/t2jf7WRT033ukuNpv\r\nfGebAX3L/zDwj8bDq1/0B+oLY/BeyJ150i/2SubysORunZMpZumW01FqxGs4\r\nJfR1PNDuFM7xqGUwCnpvegxtfEu79csQg07R0k0ibMwsRBT5Tk9/WADZCkG8\r\nmwhcEu1C/w0+KXKkjxxhO8dLn+yXacfCBXg=\r\n=j1Q4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.14_1660666583643_0.049653592483390074"},"_hasShrinkwrap":false},"1.0.0-rc.15":{"name":"@bodiless/youtube","version":"1.0.0-rc.15","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.15","@bodiless/components":"^1.0.0-rc.15","@bodiless/core":"^1.0.0-rc.15","@bodiless/fclasses":"^1.0.0-rc.15","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"55d1dcf950b5acbc9a02d3b5a23d35196587bf37","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.15","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-gahxqD/4vCvuQRIO/FBmo5NLVMKxvaWYpJ/rIu3MoQvL7nddE6c+ABOtTNp+2H44+NvZBat+86ZKtcfMbRAeag==","shasum":"404e9ec88d6bea996f038cde71dca073109c1f25","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.15.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFARpTv88ELxxG6pbq/df0NngeP0nV/PBDD6AtU3hnPAIhAMdeqiTz/wMhZtKJJLfS4mgkaDYyi9l+DbEY7wPqnl2U"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBiBIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHmA/+KNupmvYKV8/zkajpCOLSyMRfgQowclDJMSACTLRzxf8s/S6q\r\nPsSJvGxHpshhjMWHYYJ8v/89XRPQ07OHpsXhA880QCrN7hSn3r3zpA7aG6W+\r\nGY9T8+iR8TOPHaGC7xsWt4nasKGT9iZEdYIQJd3M5HPHgwqnABoU4le/ajAb\r\n8JHO1gOdvOVxecRbqiX814Wpz5NURcANnKdPIe004R542RLFszcQBW4d+Nz6\r\nzZcwrJ+Ik4x05a6rgtCdZPW1OFV7ahVA0ovkoSXApJaNaAh7q3zJuN2x1yqL\r\ndWYGLkMECNFD34vw5iCLa1JSzG1NCyOS12Zx1ljcS1Dz8xxiyMyRhOGv9iRG\r\nOo+gle3YJNIo2n+CEDEOWGyVdqXQRXYu6XxmP23v2vFNX8IOvO3E5P5dgz0m\r\nWL2kehSV6Yi+9dkFYzjFvNgR/9QOrzL+UL1EuDhl5MKQanSMnCSm5aShcnx1\r\nuNKKuJEH6a1XNc1yOCq/E6tXNtdj4j9pV1nLGJnYM1PKhMsJsXfGhqR3BJXS\r\nezvhNQ2qP+Koj1mVNEbSqqDTFLlR9mJGhy+a7H0z0YcxRwqwzCbBj9YbR9Gv\r\nW1Fxn4mJHVW5AxhGJ399yHlh0+80qdjlv7Bt/QTx2B7kHfEV2GDp0L8YS170\r\nbsoVFMWiKIMLnKgoZcgAuf2qF0oto/nO0R0=\r\n=DKqV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.15_1661345863848_0.7181268880893217"},"_hasShrinkwrap":false},"1.0.0-canary-1956-655.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1956-655.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1956-655.0+c133151","@bodiless/components":"1.0.0-canary-1956-655.0+c133151","@bodiless/core":"1.0.0-canary-1956-655.0+c133151","@bodiless/fclasses":"1.0.0-canary-1956-655.0+c133151","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c13315146adefe943a089605f5076bfd4819a654","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1956-655.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-uE8G52fP33mFNhndd5waE6xwaUig4UVVjBbSDqt564nA5Raigc4bnL2fLp632VUb3x3rYFK8djPO1o4nInYwKg==","shasum":"d0e0670ea6a275cc67c8f49457898f2310a19b2e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1956-655.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCe3lxvwLB1UhJC/4t3+ZH6u+Fy4AyqKaeI25HJduT2KwIhAK+sXhWhsJIl8jIJ2fh/KoVrW7i3hY1NhPZOKCcqW4oF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK3drACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7mw//SxalAXmM8erEKax/4a7kRAr0P+phBPUOkfQhnFDSrLX9ZroF\r\nsBILFWk3h/0tLOxdwTXTkYrs6TBbfrTyj4crvgAYz/6HjtH8Nt9awWxh+uby\r\n3jNftsM5qdFQbbiw80wVLZOU1+jlJhPIoRdQEqOBvkRBQnPfZgZCQJUqpQVW\r\nXvI5hJ5r7aUsyf7Gj0LqfkPhyWpDmXemFwL7W2y1MBN2ZAkLEbA2LCOvyeeQ\r\n6US7yLN8P7k8QVNxxVkO361JSgsTLndNP7XOxX7qOJguUsOJ1A6q+VnPnGkQ\r\nFRE5C6Zfnr72IVnDSObdO47AWG56BDze3U4WmY5CDsqGC6/ASTiB5NwjVz+d\r\nAFDyj+sbNoq2USncBO/m39RYJ/HzZX/akjqxRH/RqgYPokWGRo+3nsjmu7GE\r\n6OcaZ/HKk+fFcgR2GNq8NBKac+g4QkVD66Zpu6foVQ1tQSTSQUjBhBV84zLH\r\n8dfDoivQ3R4EeUwyNhOOI9ZyzXTaGFNfwwKzh0fGgm6X3qnadAqhBGKPCUz9\r\nZZFIDH8kblr4JSvXA5+ewxQBGYxtgJmHR9Dp3PBSksOsLWo/WqVJHvHPrkkm\r\nHdL/xT8P3SklM9WKqeNyYXKUJ3mpkOO+zxocOhECNb1zXKcen4urzeGr0ZV4\r\nQt03icVczQ7iW6RvHAYnphLZA5QBs0zsa8Q=\r\n=33Dy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1956-655.0_1663793003580_0.5552596382749571"},"_hasShrinkwrap":false},"1.0.0-canary-1956-656.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1956-656.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1956-656.0+c133151","@bodiless/components":"1.0.0-canary-1956-656.0+c133151","@bodiless/core":"1.0.0-canary-1956-656.0+c133151","@bodiless/fclasses":"1.0.0-canary-1956-656.0+c133151","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c13315146adefe943a089605f5076bfd4819a654","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1956-656.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-KR/mYdZXxQf3ybazNQTcokN0lMU2TOrFCudTba4SQ3Q1Kpse8J6/eMTuJbG8/0rujKM/8Df7MGZI9j1QVqybUA==","shasum":"3b76522e0358d6473907d1e2dbdadafecc94053c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1956-656.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDa11Gu2PNNszTwaYogMrc1greNtn3QXIbKPLK5cLXopAiALvpu51M8OObqnNGkmuYxOfidNo8NJ/SKaOqXdK6VsEA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK4W6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrP2A//VdYlZVfkyEKdcyWSAZZbY0UgPd1Z1Z3OGZp5VQ3wECm6b0bj\r\n/00YDLt7k7sPI4bmsAtslFtml6NhuZKYDaWNnCa5ow7PE1V4g7rCYX2bIdHR\r\nDrZF7QxpmvjfIb1Oadrcatt2yAK2jyg6uCnyoBz8AIBhpbVZgAaSa8lH8rYo\r\naRXcouzTa9gLh3EUZrIawdfoS3yMJ5sqvi4mhpyRA6GB1opjVCiw0BLnWCT3\r\nbgL+gpOLhD79stM97hI5BTRd0Lzil6AaK+SI0/mw1n+S/d1CazLD69wLjeyW\r\nEwygxfVLiljUPcEL8YF/ALlwzhly66bU0coUNbXY1nRHl4LJTLB4Ly9R30v3\r\nEoSPqxzjRr5VFtbYtQnS+39XAkuqBd/etv/JfMk6UhP6M6tbl6r2oKy4/UQa\r\n+Phn8eGqB50QXoSdJgJpG6tdnx5bogLfR42C9wLwzHPC9F/dzTfIOshQf3zH\r\n5BLYIe9GdHH2XdP4Gp/95uOfWR+yDkY51i8DK8FlGvIWqiiRhpuFV2JgKLxn\r\nGvJ7mSbylib3yWfBI31rMG6NNh1czs/pO20Vqo40y4c9lp75elecVZ7w7tK3\r\nkQGd43cUUEeTm7TO0GNgjwmyhnQ/XfBRus/dNYr+pD7ntyD17xN7MXhwLtUS\r\nCKcpmkF9pRLXO2t19MDyhSpMz95TatdlrhU=\r\n=CkDn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1956-656.0_1663796665949_0.7487077765388865"},"_hasShrinkwrap":false},"1.0.0-canary-1956-657.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1956-657.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1956-657.0+c133151","@bodiless/components":"1.0.0-canary-1956-657.0+c133151","@bodiless/core":"1.0.0-canary-1956-657.0+c133151","@bodiless/fclasses":"1.0.0-canary-1956-657.0+c133151","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c13315146adefe943a089605f5076bfd4819a654","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1956-657.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-/fWUcWjWyuqMzvFlNgc3znFI/1zlnjTlobsFiDpH5Pp7U2ZGFxzw/EI8UoJIvH9PY1EpxXXKdKjNS2PcixIYQw==","shasum":"dea8f719752c41ebb16544caddce259494d497a4","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1956-657.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/tiuF/k5Td9417Px3buBmVrFSA7EOUBjb3XfydsoErQIhAOpFBSZh4Xamf87KcpFuU8nWPY20g39G714REa7ezICB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK4XiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7cQ//VwpzIuZLSJH/MFCV5KsGgTi6mIpoPUZ1/WyAVNWev4Az4MZ7\r\ni/e6jRuliVHL1P3EwOZk1E5a9IP97w8ZT6+c8ST32fitK8sEw4b5ZZZ9OYAg\r\nFJvtnxrb2x1db/2H/yQQfNBWvY7RS1ePZbl7AyHn/Gkfsvb2eVE8ZdvvU6MX\r\nElJu1q6UZdQd4fHyQZ7x0KhBm6mfV8tECjse5FKRVn0wRhY0zd3nPQrvVez7\r\nv+eYaVg/yhiFk3S6/WL7CYtZMfkM4yjEZRdyVnJvUPB3RrFWdxEFaS3S9lif\r\nx1G2YIL5FR4cb5gooPP+cwrcD+PEUGMjlztOKUDqPjPSAzdOefaKLKj2h86l\r\nedG5ZHZCWfK2obgvThj0uj/Lzvnfg5o74BfrOVzn6eaWB5lIJjafb/uwgslO\r\nwZIbpO1y9T0jJhxl+9VDC0LJfuAMdJ2GqL7+ocfBi81gtqqiGtMzbmZq0P2v\r\na094SwOTmn2BlhRKN1EG+lg4y+2ILMNpAeKaEWYiC53Z13TuslIKs0Td76vz\r\nmiYmOb1rD0ObDNod2HCVr3uq5lTqMLebeuxu1zP9laBZBQTkq+ak7qD7kuee\r\nZz8BOv/Vo2KYwNPWr2gEHhD3gJArB/V7fSvuIH9IbqWETjWH1tpwk34ZFxJY\r\n4yaqyul1A1ruS0VzRS3wgspSunTKf2x8Cgg=\r\n=I59f\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1956-657.0_1663796706316_0.5746766792921374"},"_hasShrinkwrap":false},"1.0.0-rc.16":{"name":"@bodiless/youtube","version":"1.0.0-rc.16","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.16","@bodiless/components":"^1.0.0-rc.16","@bodiless/core":"^1.0.0-rc.16","@bodiless/fclasses":"^1.0.0-rc.16","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"759cc046986895b88b5dfe46bed92c3c6b5a00d4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.16","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-fUm6mVepFTrIiaTiF2ujs/rW/vFN40fcCQwX2xm3WOqWIkybw173u/eq4Xs61TIQTWUAWqEoILfn+4fXa/3I8Q==","shasum":"1fc84b85f3463d9d21fe88b18138346d1bfe7033","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.16.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa85z3eWrcMSe+5/zFvA18MyRKpbJ2gGZd8ULzw9+xpAIgbb++NjPdb6QQirKPCHTO/voSJZhNBNWTRxeslyH+cis="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLHeaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOqA//YxokzMAqE5QeiiduiIdnF1kbUYrav7wFWY/9xELKSiDcZDJK\r\nY0w74XN/ZiCdpaRIFtLcIFBg1c6c8ZyOPefTP2V5ON4jZC+haDNEVTAxeDFa\r\nDZ6S8UgwP2so5elyB2vqe8QnkpNEcPyc1wQbmip/mFKmToKFwv6CLplhY0b2\r\niUyAjhDleTAPcMtvcxwUYdUx8Nv3psWXERlPPCVWpbl88eipluvVzQFhUJV0\r\nDxuQruaeKk7AYOQOTylJrr4Ri/EEAxGS63wSI+YP3zVHwy/nmHZwhWIhJQOO\r\nRQCCUmMA3kzSzDcFlOwlTnIKlQ9vnuOTyS8qmlHX3Vpr8INfC2/7k3Htx17G\r\npYlROrvTj4q9srNEBqQptcSqfYeAdnleG24ZD6OV84G//ynfNx2vantziXgt\r\npLo+EGzXWnDYCLF/Q243MYEDB1Oh93iO7cZYMbPW9uMMeAjaCI7Zlfn3NeEm\r\n/Ftb8ds4bOHZ90KlF0OMcJBRs/1diJT36oHUSTiG76lDk7vPEawcFySc8Bli\r\nC6ls0QnCegRFgRwoA1Pd9GmWEUZ2JiDCNbgo6Wlrp4WWo0Kn5lA6usFDbjwS\r\n20qg8FrGDQbLWvHqvlm6SnCRm6QpEDlfHvJgcePA9TT6Kla+Nk1qBOs2Qh2b\r\nPyv3xPwCSVYhQJxDTeAMYcSd0UhPmyp43JQ=\r\n=bQvG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.16_1663858586192_0.6277639101283201"},"_hasShrinkwrap":false},"1.0.0-rc.17":{"name":"@bodiless/youtube","version":"1.0.0-rc.17","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.17","@bodiless/components":"^1.0.0-rc.17","@bodiless/core":"^1.0.0-rc.17","@bodiless/fclasses":"^1.0.0-rc.17","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e0a7df3f73a109cb752f5d07288b832b1061d682","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.17","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-eUG+mYEzYyENoHOwci9UmFajo+PQYz3+rsWAgejpkJVqGXj+V0SF1PMs3mF5qE3Dc1TWqKIIbdcX5+0V+5o8rA==","shasum":"c2e3528e55426bd840ca26d7e16088e67ca162f7","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.17.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQpoorCXVuy0lrLfm2MZZGd+s5Sqz+mjsa+0St9EaeGwIhAK5KR9scczLzXa7KCM2B5sWUVR1HlkaINnfxccn46QIU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNxR+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCpRAAmDBwZWMcPGwsZQ0ng0OaxXRjcVYfksSoKTd4gjAJ27plQS96\r\nFshM9vWHGkDiAjQxhzqtkqwBWEn/9fgkvnmRplfpzJvtOFCQfePYlDA8M1E+\r\n/zC0/joR53Q/8010752CinsG9qN7J8MG/XSn9iVu78cR36rPQE1oLsJwlWq7\r\n+K8/IrwOiPEN5Yqkc3fnxnuV0UDIHMj8CzLMx3V8yDVJ4Nhn2Qrmv+EiETQw\r\nr08kanQqw2jYGH/sO/Vtj9Yeif/mMK0IJjUTpopCuLEC1xZHl3Wi1N8Kfvq0\r\nZkPW2ZkS+YNYX3ZHig3FmCoye46hn1Jdz38ETgKJhyhlRLWa+Ly7eaU3mYK7\r\n9zfjWlTKo/MgsimMRQARK0Gc6PDHLOhjBbhPNagq7sbi0/83gxfuZd4n3Jyn\r\n6cMmcDAAip4U7O/7x3/yhsso8u7744mpzmC7Z3o/lFx4MLNLFMR8Vre9ndAw\r\nbmW3XAVvjWaBPoCJAnoSxC9FD9P2WvXjRQydKqSMZE3LHKdvCPwffcuNPifg\r\nxNPMS2RTR74V3I2mkorM2SAgL/UXO/L8hX9n9JZUS/4dRL+zhobdojbJaF9T\r\n5mT18K3CJdsJWZXBbTIE6rvyh/Xo1TwxW5Jnvi2V/036b38jQzp3QCW9LW2e\r\nQGswEY4zuCOQGED2neGjBAfgS9TpO94eTDw=\r\n=+ioH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.17_1664554110501_0.8475135362707931"},"_hasShrinkwrap":false},"1.0.0-canary-1952-680.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1952-680.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1952-680.0+e7ab5b2","@bodiless/components":"1.0.0-canary-1952-680.0+e7ab5b2","@bodiless/core":"1.0.0-canary-1952-680.0+e7ab5b2","@bodiless/fclasses":"1.0.0-canary-1952-680.0+e7ab5b2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e7ab5b2cea2c9bab5212bdae2bc7577bdeee886a","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1952-680.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-KFzlSXL2fYBv6xCC3BvbbBeT57kFkBrGSXQbTrgaUlLz+hZH55IDnFJdL5NVilhcr3nH3jIXC7bAPagQ4oG0bg==","shasum":"ec27d969ce7165d39bed8201198f522fac200d40","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1952-680.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICqXYbQ2A7ogByYXUg0ftNrNj43SqSu6IfBoYO+LG4TNAiBsaaoXQ9hwZVh5B3Nj4gW7Jr6rZTiN8utfW+DfNjd98A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPzxOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTjw/+IByNCJfZdRyhCmDC71rQAB0dOVqiXN8vM5Aheq8nOfG4ZDMi\r\nYnWzMAO+2k+2jWA0RQ2MqILmVn3Mi9/qmOabQKcKRhyZR5BENWt7Rt1nPCly\r\n78nlefWFMHjrKdc3Q96NGPAUeBCIy+xaFQKnKDEva1VLA2qWMUEYB08p+eeN\r\npoSkm7rSGpvMmYUxviR4FOdmKfNoWgRrbG9Sl4cINqjmUZmyF8Kj9wUGubWJ\r\n8ZoioI5YpBQwXZ18KdNxQKEsLN8ap1/FouMp8mbSknmy3Fzsg6a23jrsqHyF\r\nGfgrER3f7LNRX7tJmTM8b9nlFP/AckPhOWb7rjUfOXkt1VhoRjPYLfO1a1PF\r\nmdhal9AE6yLxuKe/om8NAO2UOg6Rb2vZog1KVYdpzXu8SWnM6/RJ3jr2PmEH\r\nMqtEjPrYapjK91w/FeJyYIaoZwu+bG1PFn1BY4Z8RvUzraGogMyl0NkUd/2X\r\n8F0C6qQlPR6vzFxcPVbk3i7D0OWwqpvpigOu+3gB4NxrS8cvuKO0aREvTzVn\r\nCIMbbQVeivP0jUhkXPO7ksrHInOPncWPHRNgdevC0ZTzD5nsaN79qKiNZmav\r\nP9li+ekdxAb+PjjJG9IAsV6X+mtTUOAofbClRXozfbLX3zyv6LfsDFyVZdDh\r\nmvpG+j4VN+6w6z4LFD/2wvv00qgKsRk8WrQ=\r\n=B6lT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1952-680.0_1665088590320_0.06726361648086443"},"_hasShrinkwrap":false},"1.0.0-canary-1952-681.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1952-681.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1952-681.0+8cecc8d","@bodiless/components":"1.0.0-canary-1952-681.0+8cecc8d","@bodiless/core":"1.0.0-canary-1952-681.0+8cecc8d","@bodiless/fclasses":"1.0.0-canary-1952-681.0+8cecc8d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"8cecc8d947d542a052dc86f59529f7d39f204ac3","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1952-681.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-2dlxO+mDNDUfXCTBBGkEuS2fhc7u657RXrjm7+NjDF0ObRXjwv0BvuUZPML4yufuwq3NkyXYSXVCBjaoDJjGBg==","shasum":"62b96eaa77a904198c8499f758995a58fc2c6219","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1952-681.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfA2pfXHQs3dBtksR0Jle8qMvFydK89HXTYB1Voo5P4QIhAIrKkbil5Ji8zWmHBPc6LGq7LMUA1CnZxSHjUG4RL550"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQFgeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrL+g/+N5Pela8H1KGaDO3zXeeSt9shw/fPSumNT1bUEwRYEIDbl+ek\r\nJr5aIvkJYvDOQhFdy/OqK89IHI45DNcEJmOlDRgzDChJ4dA6U1NUCd0573AC\r\nUjarWp41lo3+Gc4HNoYK6HIqnQmIFBb2qi9VNNELxSq9Ed/airlcW3VMi3Ng\r\nC1OJ6ah2uu+TDIYGgFTzSMsvAKPHe9dbKVFzhfNExekBZtwTaaa1txzINut8\r\n2zs2TFj9NUDszQzL33N4LW9cxBi7lRgmwGRGCMo8FfXRCJi7RvOO2vRkx0tP\r\nU35ijxhvwi+B0ihr8erl8/g8qZzuyacJ5660NGY4QxuvwJx+L+Nq2e9MH0SA\r\nsPWZFFSlGEVrobtHkeMBTuhDctX8/O8Ok0RoHxWr8HbqKvtDodoKxbizMcjr\r\n8W+ypk3un0PM6cJBNm2tCXmPnhvnJalscqeHQhKO0qFck3VReIgoJynpidwA\r\nog5o5aPmZZR4zHwSWTmDPkblB2hC/RjQQn/gmazLZZbDN3QBddCuu3Cal5z4\r\njYYnKtU3va7iX4VAwDlUewdio6azGQBj3oCV0UISbhOXKbrKXQCiu7XBN/Qh\r\nx/Qsl4Kk1JmlSUv01Sm9379DNtvOeKImR06Ses40xuaJ6NFuRZ+HmNhbyYA6\r\nnXR7+TFpl3CrtPxH1kAVdeBjWcM7wkbmGws=\r\n=MZBH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1952-681.0_1665161246724_0.20333107208328105"},"_hasShrinkwrap":false},"1.0.0-canary-1952-682.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1952-682.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1952-682.0+d7e026f","@bodiless/components":"1.0.0-canary-1952-682.0+d7e026f","@bodiless/core":"1.0.0-canary-1952-682.0+d7e026f","@bodiless/fclasses":"1.0.0-canary-1952-682.0+d7e026f","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d7e026f7d934819b6f65c63ed3e4e6f102324cec","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1952-682.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-+W40e+ReHEZD1M/6dA+JQEoh86s5hAmG4vCD6w3Oe+bcVaOhnw7RI4iTVXcjoA7YS76vY+ea5Za1lOyclbM2qw==","shasum":"9e766f805072bef0ec3298377feb4afc0409865b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1952-682.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlkzOImV70eUcF95EVua7dgrj29cfUjyeAeqpX2en9zAiBImOq/DyzJsujFGP35hWSnxJiOGYbcaAkuaSsPz/lRJQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQIR0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7gw//Xd21UtyEtLN9jmVwMVmJvBghjg/dtrY8v/9WeZJ+WaUfv7Du\r\n5GKdl97vZhZuMxRSYnDXsSbnOHyO4TWFQPZ0DWo2gvRP4NqOgB+R6Iv3cvic\r\nlGhY5+W7/3f4nzGLfF3k5O0JX7oqzkFtHL0kSRCgC/YvSKr3r1qZlUZkSZxW\r\nz0BoCpH3wY3F0i2XUWTXR8/soOt29WYRaP5Ud2ZlH9Wd768icyKCNMlFVHMx\r\nnCRxz7v5JGSxGu8i9hqf90MAv0WkLoJMHeR3YuA0nkRpoSNXwN5kjuOCs0jg\r\n4BC9XLLY9O4gQcB2YuhSAeYtTvw7rQ/VDIyMeTiiuTQRg5FzWgLfNDJ2ZyHn\r\nG4DRVSru1L8hH6VPUX0jL76U46u56MxqA+ir3XWoOoPBdDbUajFgpIa+P6dA\r\ndY2sN1gMVjGRPs3l9GRKGoRFaNvIz77zO2KqZZgCdUeQ3vzOqeGJ66wECbe0\r\nj0RpK6K3nYbOTVoaK7MWTDu3y6YC5/p0TXyeiZSAJsvq9Ei3NAyJFbivhJZM\r\n4Ay8jfYi4p8/dSQvp2zeKKsaIVc9jtJoJ2wfl9sSq9IMAD9hqMrX/z2x9oAM\r\n7PW2atLWFfVxO0GaaTVaqS7sQGmc+/Ona1rV/+p2KasT5X4eGNCUyBh2NaaW\r\ndEFXajBbTl8nlhAieAjxnzJG7ZUtTYnOLjc=\r\n=EnXF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1952-682.0_1665172596020_0.15498082536299007"},"_hasShrinkwrap":false},"1.0.0-canary-1952-683.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1952-683.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1952-683.0+56193b3","@bodiless/components":"1.0.0-canary-1952-683.0+56193b3","@bodiless/core":"1.0.0-canary-1952-683.0+56193b3","@bodiless/fclasses":"1.0.0-canary-1952-683.0+56193b3","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"56193b33fe7181f00b0307537d004ad021aec66a","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1952-683.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-eAXg/OxVNhDrYYhXbKe+dQdza3RpJ0yyqMzcSWhjMzoSaQpyC9iVBYUiJtQ/mH37afynQVE3dP1Eie6AfsLwxA==","shasum":"aeffac7b9b897e0978028520bf275d2676916e0e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1952-683.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJTqax6GpKGDWOc68LrHJqa5GyaQ+F5Zhj5/w8uphfCQIgCEUJUPhnE73uC+Jdun8N6MnxXNzgRJNgqZDDBsamXxA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRDLHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdpw//Rn9qIR3TseDF31anN2p882h8c83f7RPsEA5rvAvtxQuMLldL\r\nZVDMgXOuYCm48z1JKfgNBnVvKkizmwXN85keOS+Dlxw/o5DzEgDz77LDLq/Z\r\nC2sBWedY3kxogE2RuOpY3RDBG/vofdbWCoBNo9fvHosZ/38OYQ9hFAHzUNeW\r\n+4LfQWNkFpU5O4EZXh6wNWq9T2uel5V+gArkU85IHDt9uhbnlvpWXh+4sjkW\r\nR7RqRaYA3dMNGdPtoXCnylRR2m0nAHnkuMB8DmnrVTFehiYjQv3rdXjR5qLA\r\nOXnbhcnRS6VbGeNI+wW6teAI1xVD3oo1vJvOP8DQ9YdKbfQD7VpgbrUqreD8\r\nOi3H/qZzXHP/DAM/McwIz0K+DEMSZOxxWlzlJHScwf/T3VUMyfVFKG8znwFX\r\nNT1hYp87xlF2mAkVmPkqRbVLfFxGV8/6FCCjSI8zUatLOGNrR9WQiJLM7ugh\r\n3x6VdxSfE2OJt9erYP4UX9x0LaJtB9D4F1PKSmVYUl6in3igMAss2VZNyxqZ\r\n/XQ/xJpxtF8TwuIpHwZHJpejRQa9obsaXpejLcelnM96zxPoHeBU5n/HTREk\r\nFbtrjRgvq/K/LqmQDQ4M9xIul9HfGBsMpKe0I6/1sI3YAxRYPs2qcEDD7gcU\r\nLtZAWys9kDeYguj7JB47izhMrbWfFqYYIN0=\r\n=sZMO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1952-683.0_1665413831630_0.8073068679293669"},"_hasShrinkwrap":false},"1.0.0-canary-1952-684.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1952-684.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1952-684.0+2c7f90a","@bodiless/components":"1.0.0-canary-1952-684.0+2c7f90a","@bodiless/core":"1.0.0-canary-1952-684.0+2c7f90a","@bodiless/fclasses":"1.0.0-canary-1952-684.0+2c7f90a","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"2c7f90a572c21e4cea72289d52277f756a03a098","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1952-684.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-2WJLXFy8gWUu/E1TryGXEJteNSEmcXV3sqMKQhprwLCCO8Qyyeymj6eNFcYYDcWg3bE8m24KPYSI/GKpIFzKGg==","shasum":"7ac2fe2ff05a06609ae2ae01d69d83e7272059be","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1952-684.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEz88NVp0ah4b5rLWlvAhz5oQ+3A55WUZSWijm0KJjukAiA5tNcx2qM3iP5ydGnyeH8KSMAVfg2E5by5o66IEEEwYg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRD/rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSgQ//dis6zfFUESP5leK+JK6E0/P4V+Cc1ynjDmNBz3SuUk96mHN6\r\nvxQ32T8ijedht3O1EqgcgzituPlo+4sN1cnLTIdD6130wSSdmliGQIJGKT92\r\nYwoP/iZ6w9zRX2UBGBvfpCpV+9J9wprHqLGvLx4++w7cePhMksAmLrmnLULq\r\nY93HLLFT1urGLnFQtTMb4NJ17qYVHJUZDyUYdBZgCtNo5zYxdcry7u77TTjG\r\nt4mxqqAbUW66wSGhcPmLPXDLpftEdyXvXMZeoP8asPR983lrYqZiyqgDvdVe\r\nm56PUNxeZSP2MUzXLRmTgBJz8GB6aq70RWesgcqH5aTpGlsM6swb2uBRlCG3\r\nSYjmylSkTo+eseDjA1IYBRaADwpedgS2Y4RbSP1iP6tvnUbBLUOY6O5xI0Qi\r\nkYcLmxdGGPmE3MBhWlBGiVsdDk3pyxsAhxEyHwW4AulokOovyh6fly839sPD\r\nPBeVRanDRx7JeoqRvGKlEdsywmmbwbs26XKUL/fMDhmhk1gnVq1GN0A5hL1y\r\nmXB6kpdJG/JTi6g08LZI/4eA2f/pkwfnVt6QZ0RKviG5ZvJrYlezDJBINPE0\r\nU6xQblH/CchagrE4BgdoXoooMCa5gOSEibKe6YFOBYx1TtUg9ERQ5batYUBb\r\niGlNn5SU8wzjVFGW0u/Eap9pGG2MmGAs75I=\r\n=OPcY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1952-684.0_1665417194729_0.04892372656028665"},"_hasShrinkwrap":false},"1.0.0-canary-1952-685.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1952-685.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1952-685.0+b55b6f8","@bodiless/components":"1.0.0-canary-1952-685.0+b55b6f8","@bodiless/core":"1.0.0-canary-1952-685.0+b55b6f8","@bodiless/fclasses":"1.0.0-canary-1952-685.0+b55b6f8","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b55b6f851ff00a6601d6f4e98474ea69b7b0a822","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1952-685.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Qz8SWfFpiVICOnDjCw582fU7d+esryxe0xbecdRWeEG1ryb4y97VVxf8sHc2+0dfeq7ceL6LxOFYxP5ncYuwcQ==","shasum":"570b5b11276144898170d566a023df5c32434d01","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1952-685.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrwQeYTmtz2r52u5qM0+YaDMoRKgNR6cX9/XVT8/PozAIgf5APm9wsIl1D8fVnJ9h8CSpBdIDOFzO4ZaJN0KJwSRc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjREs+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPsg//X6n+YPd993eyIykxWmCrAiQQCTUiMIwjCYpcPa1D3f7wAuz9\r\nclO9R7ETS3v3CVyuGVoMUeKiJKHwn9byPsh6LZDkzTFUvX1NqRDqCAQSZ0U/\r\nilejCw5RMrBlxBJUotj1PNXuEohfd006qsp1TQh+sK8Z/3vmMLiKo6z+SjIg\r\nxZiAcY7VNV4TSHI9GMKAIufJfrmhsMoPCAgrklQD35/hOlvL34ZZz0f+YRD0\r\nVF3JEdohsdP576JRoyca6dW5AKYm3Z2nKZtriXwcrt/Ovb4muGV4QgkfJwc7\r\ngqlKyuHrtQf/rupaTHQ1jTOvj93ap/skeGWUarYzdwVJu8kwZ3PQ7eswIWz5\r\nfu0+sHOGhV+WH8SQk/QnAq2cV1kt90aUb5a68gZTKWnDs0eKRmPYlwGGi0p+\r\nJiOggqa1cUTkXXizDCpQzuWQg7Q0TTHVgC+iBHoVYdk5DBX8A8erahleGN0t\r\nq23Gb8kHqt8Q+oD7TmCq0LqmDb2mhtlXxGmmc+0pTptUp1dffQsQ6PTDV6gI\r\nP7jmQQrcgrXYtVBUb4F3D5RhVo8egWm2H3HhiNxeNnKhyiNokGiuWGJe4tSp\r\nUz9dyBI4ZKNkRjyW8xXpUNMccKX90AkNsm7jPr2/BJxx/UriakYyxRsxWYrg\r\ntCbACcB7P6+ZE7nsC1vTgZARLDGzDtcEkT0=\r\n=sklL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1952-685.0_1665420094300_0.9422995531047289"},"_hasShrinkwrap":false},"1.0.0-canary-1952-686.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1952-686.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1952-686.0+be33867","@bodiless/components":"1.0.0-canary-1952-686.0+be33867","@bodiless/core":"1.0.0-canary-1952-686.0+be33867","@bodiless/fclasses":"1.0.0-canary-1952-686.0+be33867","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"be33867f680780572874c4fb0b77f5c32961d779","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1952-686.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-iWVZ2WYKeC3dlHS6CX2sci3O7eMI2eUAAt8ZVlCV73FGBonRM+DI8KyjueWlmi9UKLhGKhU15SGryWvXSXcDVw==","shasum":"cbddcb3d425f12aa3253cd34da5f78ba7706b30a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1952-686.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOkiGi1U/LgPVT3xlbJt5o79iB6m++KUhj1cLjCFxWCQIgc/Mjruik/2XNMNagqCdFwJ5H4QpMi2OIsmIV17thI/0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjREu4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT+g//TZWKrhWxFg+qaGO0qkQyxAQBbb4MpTn7Id/Z5l/U3sQDn2A2\r\njhdlBjHGpcb5yYa4rLb8IT5zrk3rofyPtXtiyQ6hkYtGIlxY6VXXBJMDG0x3\r\nAATb5aLN2VN3GXxc9XP5mv99JReT0vnb89MpkxVMlaIe7R9JMEmo1y/NURoK\r\nOV9STx0Uif8l+VtyN+u59W52CYOgDNErzbfQb5J+TSwmP1ZCDDKXmQZvr3vp\r\nxxQDWmnBobr1JitWvoTU+DYzTpHsB1a41AduNywy1wp8Lmu13pRVQm1mgmUq\r\nB5XUL7jwYSzcryj6VJVPIGaxQG73nMOt7xJiuBEv5CxXBei8ZCfNtWep0QAV\r\nvzrythYPxOepP1qYgxHgD/IdUnXptmoxk4XB6ZQXg9VB4ykWBTK7u4ht5qw6\r\nzNEwejnGWeohjUOnPQ35IobHGQJp4O6rqi70YSOJrZxl2ZjqHBarfzgQ4uNT\r\ny+WrkW5/2b7NzwtKN0PXBeHL8AzKV8lnConp5fDrJfUiwTq7nDn/y7Ljp+3s\r\nFY+rn/9MgktB07ao+K9a/ce0kdAwuVx0YM4EUbCwOEnCoBHExkoSY+ppjnoM\r\nqEasIFsCcPXka5LUx2miCgdlpKnlJUxLni1hAIxFjmARAAbD9rNXq2brQIpN\r\nu9XSEscnT/sGx4+2xjJ6n+oVP/+q3rkBfPg=\r\n=Va8K\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1952-686.0_1665420216622_0.9204919002380678"},"_hasShrinkwrap":false},"1.0.0-canary-1952-687.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1952-687.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1952-687.0+ff2bb25","@bodiless/components":"1.0.0-canary-1952-687.0+ff2bb25","@bodiless/core":"1.0.0-canary-1952-687.0+ff2bb25","@bodiless/fclasses":"1.0.0-canary-1952-687.0+ff2bb25","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ff2bb254d39ee21be5bbb2590f22b0319b1c1a3b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1952-687.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-yS00elm0zlmsDb8hOpoN5H3c0Sd7FqAjwF5QM/nTM6BITQehtcPONCamo5zxvNFv5COByVtf5gMk/rD+zcKBrg==","shasum":"687693c8f750319e8c1b39bcf5985b6b0db3e1a6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1952-687.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt/Sy8gSIuQkU0biejoJQ91Y6fOxz8/LsSxZwHlBJhHgIhAITesjJNBya7wprH9Xe5hMZOag79ueeIdQjWosbHUcD3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFVAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt1g/7Bs4cnlE+nmvtw2ybwT6TaE2+AebQVt+O3vjZ6eMP3xgXdO6c\r\nh22LcN96txuCEUvD2oJwLfV9G14Ka+DB/3LUHTqM1vxjYPLlQnZyycrsqP3I\r\nmpPqiVJEcZ1kJZR7/etlq46nJWmML9XUOuoQe9eO6RXeC2KZJqh9g5Mp2MkD\r\nLGCrJX3XlVIIT+zefw/gaxP1dmhTRfgSu6DR680zqOTNizAVOeSsjTVX6dg7\r\nwOH2Pu6ivQY9wgbn0DG74UR8AUli65zuzDN+FPTmIENBra6LK09g2DtPhOUX\r\nI/V3UsHMahOdot4f/oAD/I7AJcZCBuABdXI5SCHWIXJ3fEETWmUQ1gM6/rnG\r\n4TKIWeLwGpXE9te/dllLa6H5K7CWzO3crT5EcwbvJ8Q/n9DdNkH61YFjsFxT\r\nwy0fJFnZlqSoCJ4hYGE4Kcf0bL/l+KoGqVBYSFjO5ht9J8VgVEXAcrTHqcXv\r\n4mfKoDW2EktsosKSWxSGCW2FdhPgWt+T9Pfz/D+Yn7vC48KM2uNoj0frGr4m\r\nilsrU+fy8jpSj/xGBNMZwG0y9Qqjmh2TYn5ej1YjvcyymTPm4cXG9Sbok4yG\r\n1OZXq9OlqsiFeWRb9UE6ZMlpLJnqJ3ZUUhVFGUpFKnixUc6G8opI5/iLOIF+\r\nh7eLFmQM7qY7pzvx4FoDKIZ6AcIEAjNNpfs=\r\n=RpCd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1952-687.0_1665422656477_0.008150748067035307"},"_hasShrinkwrap":false},"1.0.0-canary-1952-688.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1952-688.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1952-688.0+b461b53","@bodiless/components":"1.0.0-canary-1952-688.0+b461b53","@bodiless/core":"1.0.0-canary-1952-688.0+b461b53","@bodiless/fclasses":"1.0.0-canary-1952-688.0+b461b53","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b461b53092b53be525ae04045e57d4bfbfa34dbb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1952-688.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-f/w9SNwvZc5uvSw92ajwQSpkmVCfnc+Mdc+pRV1rXz5pVvAAzAVRTNUwGLNVqpqtJBiUnYiLWIh1Sqa+DIlv1Q==","shasum":"1df47be805e8fb6bd5cd530890bf876eb96e7843","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1952-688.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDkfn5OAb1IQrbaygvtA6WiHA+EuyP5PdqRVAXSpGmkRAiEAuY7dHQaSLiItnAmiZpkfzSgpqb4wRuoOc8DajhD7jeM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRHofACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtAxAAhSV8powkzOx2rfxqSvoigkipyaXvf1tuMdMIzh/pr3lIcfkq\r\neWjAfs4dDuLGYaC4eMjPl4GrVg1+LVtTA86KXKn+DJD9quBW+6M/VL0QfKcX\r\naVPAGACxdiNBimCJ4usGuAD6OA9FplE6CU7hiaSid4tXDPcCccsxh0NF+LV+\r\nKKZJZR3f6tG447LaHIXVy26vDz3lF9qjL3YTM4FBUF3hfMVG8EBju1kpz3iU\r\ncseMjRpNvoOqS6/vWPhgOA/xkzEqCOM4buGqjw3Vz4hieEyGChBAHv/3X+6P\r\n5LIym9zJATwHTderNvPx7bbeQb+b+RmmJMOJ7+YJJCtZYlhYNmec7narYED3\r\nJXyPmSvo4hlR9txZvxEsQdWeTcUFQXXg7HrirujE8WRbT5/4p+U+MwvfBsaV\r\naonIJ/QAD43CEW+I7obcjiDviu/H5zFOJ9igN7/kj34t6XE4gFr3am8K8UUS\r\nd+2fy57AIFMl4Bufz29RkOi2tMhFBFhS5HsbZjefvp5b7oLpxRJEpK3qHGCM\r\nwjCtxu6fJtCtqVBNv7LKJoq34yrk+diuOfaC4APY1nZWOTYARE10X919dvYF\r\nEm2zV9geCqjVArVRoxqlJAT5PABZZkx9Gs+dAjarA7t6xrEyRLsXasQ7Cg4h\r\n/3nKUZLYHa/Kg71Xil8jp+5wxqakdxPq3pY=\r\n=k+O3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1952-688.0_1665432095110_0.6110490520592906"},"_hasShrinkwrap":false},"1.0.0-rc.18":{"name":"@bodiless/youtube","version":"1.0.0-rc.18","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.18","@bodiless/components":"^1.0.0-rc.18","@bodiless/core":"^1.0.0-rc.18","@bodiless/fclasses":"^1.0.0-rc.18","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"8e37e4de4506adf8eb29c59610ec8ad35604edab","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.18","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4UtSNnU8o+LgOBSlKGf083vFQHzSlOK6lGiX/ZsLbDW1n5xvuirrC4xUUDJbZDrSAe5Y9L+Bhvc+Xy3btUvYeA==","shasum":"fe1456424f4fabec73af0c4f8a69276592fa13b6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.18.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGinuYTmw1/EmHsHQn+/1yg3qPyPp9/7tVweQ7mETxC2AiEA8Nvp8NV/BaH8bNGB1YelqBK4TbetY58BiF07gO4eFvs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTW3rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9zA/9GmfFpKG12vS39leR1Odf4MWQwLX3M2zpY58d9hPuH0mQBjsp\r\n1uDSAVevMWJTV+gG4vqU0VNnt7zur5ehnpwxLPwkq67om4/QDJtdyKo9jvAd\r\nv3PRMbu1DU1quOBHGIIRl56CcaqgAdcyw++zTAJv+yp4AjixhUAPHi3fu9C+\r\nC4ehxWD5+2P977370z7cfiQux/ZGzBWnby1ws2y7CixKUsuLk8XSaUb+V/du\r\n9jgGa37106YnZUaNWYPakOx6945mxPPYAMbqJYBnjIW9gqqyWkXAqLN/yjke\r\nZlCyKITRd8BUgLtNSexoO5MvAsI9rNjo5Jsc1/00Z9M06is35uDSuUeqSv6B\r\nDYddpT6ERW7/dtlul9cp+krFx8yol6oR88nxA0S9RvWBanoovjEW6PFhvNGS\r\nGOKKgA0W3y1PnGUsNKiZC1MQU1GncTiRUICZYg8IMK9SS3/nSx5Eoem2aZXA\r\n0OjGbQ/QDiOrHIxrpfc05mWJcaDLjzhOyVdAd1jub4qh8iL/ZXm/6orbIfAo\r\nY5PMyGLpGdQaotvrwEwzHu2kQCVjERjJZEc9NlT6Be+pr/muuvZx87j6uIOg\r\nhs4HzHN1Ejxk/JUepF1owZZYt/pKOvDTwwMeQC4YBXcfN6Hl0IvJRWeFr8Bu\r\nYrlndIKENA79IXnKGwsTeZga/egI1Pf/lZA=\r\n=rvTE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.18_1666018794775_0.08695751583874634"},"_hasShrinkwrap":false},"1.0.0-rc.19":{"name":"@bodiless/youtube","version":"1.0.0-rc.19","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.19","@bodiless/components":"^1.0.0-rc.19","@bodiless/core":"^1.0.0-rc.19","@bodiless/fclasses":"^1.0.0-rc.19","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"69a9445799b25bcf3cc35e0bcc458eeeb2c480cc","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.19","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-YkctxRssEhMoppTJdXn3GBSnnK4lE2yv0Fjpepmp9vKktpjY835pviNePUYFd14FAutBfRTQPtE1+YwMvDoO1A==","shasum":"917370401b2690c6b8d0dd3291807d12904f02ce","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.19.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICq1AZjUmKTfPAQVsPfSP2iVPCpZvw5dzzjc5dCeKZQqAiAg/aDkXc1RnB1S1s8u5hUYFfPAQFMVuHKmVKrHpUtABw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvtgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvFA/8DxKeN6HLq1ei8fDOBpv7MnU7WbV1ffdl2WSd4uil4rcis2Y5\r\n+J5JGfDEHIByuwM0TrzmxkfXk0aYQvPuOZPSJz0Tr8GVFS7vCXU/5aTVBJo9\r\nEFrzReY87WhpZkk/A/ORFe1igG4V+fPlr4Tjjo5FTrYFxNluW/sC6sQPJhDz\r\nkhH1hEq8+kbv7FoDDhpL/tU7QuPOrQL4cNGygItBZcAFDrrFXHOIf4EK/VvJ\r\nMBTxFD1hLRT0cpp+kUJIf6HCGpoOCTCR10E476CEd5ZjobEV6WPWoJ8HnwR0\r\nOGEu2qeC8C4ocbVpMBN5hej3dRiA1FN+15e7QPqjNal/FGi+PJL/AE8cPpV0\r\nNJqj5w1I137tO2LQOEoAiJcO+/uHHHNZ83M2yY9zTiET43+zZM6GO9y886Rq\r\n34cwVym7tW+ASNzHNBGmafjJUaXhoT3rsu9L81+G8pxCy13qV7FlMss5qZWy\r\nbxhCCEdyrh34DSH+7r9JdKwrKtZpgJroUsvr1ZwGeOzUotV6GYtuQoBcXOQ0\r\nVjbqTdlFAjNuoGNQe5sAwcZorcd8Ybqjg706cPHTIq4pj4X6QpiduVvn1Abu\r\nnb54i2+B6efsp0qF//HXDovsfS5YcB1ggs3lZ4sL6B8jrJY0v0RAasUIp7DV\r\n5jaN52YBspvQnN87AomdX08/7tDd6N2C2IA=\r\n=omJT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.19_1666120544041_0.6033272806033325"},"_hasShrinkwrap":false},"1.0.0-canary-1937-704.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1937-704.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1937-704.0+d9be939","@bodiless/components":"1.0.0-canary-1937-704.0+d9be939","@bodiless/core":"1.0.0-canary-1937-704.0+d9be939","@bodiless/fclasses":"1.0.0-canary-1937-704.0+d9be939","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d9be939c1348fc8365bf52eaaa739a60dc031a7d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1937-704.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-jihYCU78VtCUxm9jyzBpcMcaxVlhq6WqXArfyUkpzY12jVoGhrXv0qskTkXn5rnT8aKWgSrEITbq1Js+jGMLWQ==","shasum":"6c5900945903ac8444c754b88a0a232aa6999499","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1937-704.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZwnt2b/TmXSoH+sodp7gjQQaoWeYp0ZGyHUIz5shQ/AIgCwLmOnGn7ycS0JPiaPbfhH8vovSGCP6kU9pQ5yIpwGo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUCGwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowJw/9E5CWSTaEJ9363h0JjU90oUCErJw+nE1zJBtk/3ijbaf7cB7a\r\nsxNLpZxoovP9aCLN7+H7VlKT6FyZZIGsEm4quYFfWx+nvvg/qTykM1gAq7ck\r\ndGVD1shegkmR8tuSNMk9Dbthcr1pG9CWMn0krblKJdopqng/U2D6+JqnLEMu\r\nhIVFRq2/Dk2iX46xzCELhDT9fVoTQUVNLa7QSype44aJX14/8BfcxpbCm+iP\r\n35yDozdL/nKRA2fHQWgj+SFnOZMr3ZP7EBTuipqtd4Weds/8MiRRltLT3ZS9\r\nJari3/e5ctAjB5sU2Xe7eODNtrZ1DlhJQX4dB9u5xVWfiomQavb9Zd2Lt56J\r\nRO7xvQ067cY2jpDUJOriM0/2zh4CR+8KtCEI/iduGa0t+EDpbbeg2/bzmb1k\r\nTpU40IH7UqxlZijT8J53vUVGzFcg8Vm6BTOZi/PMzRspOWo6hgsVh0wNdk4E\r\nGzRAe+dZL6Z0CKw9NnXRWMB/RE6txZlLIrkGH9Ib23naGltWHr5FB7Owfl0u\r\nkOlE4iVGnObWNu175x7j2k78K3fHzCkLBwtbUg+tWQ++OB80Me8jZx5REubA\r\nrvqfqbX215sNZUb4qPcZ3B+OLZr1BW/CVSup/K4vQF+6+Nt1RL4+otgdAV3U\r\nQ7OGv98kxj9FawBjMHLjT837uyzEyJisF2w=\r\n=NHrW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1937-704.0_1666195888193_0.14699350880765127"},"_hasShrinkwrap":false},"1.0.0-rc.20":{"name":"@bodiless/youtube","version":"1.0.0-rc.20","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.20","@bodiless/components":"^1.0.0-rc.20","@bodiless/core":"^1.0.0-rc.20","@bodiless/fclasses":"^1.0.0-rc.20","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"5a7402556d413179a90ce6c39bba18349818cfc0","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.20","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-xup0+VxU81VPIAcHWbBiz6lRZpJtz+CUKtOB0F9wjuDu7LUDYbvvSRBq2S4+3+HVRongl+wmsEA66EVtRWfvkw==","shasum":"d02017af9a0b0f26827be89dc0400099a75ed4d1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.20.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdSwqn1TCIbvKttEJY7lzOMZsra2A59V0EOhSxVuBiDwIhAPOlotytInAor4XA2VexGdm1WSAMG/VnYgkASvqMKjqI"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUC4pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPrA//UAAZYzl0wpoQVFVu+Ek9IkYfItAeBcVFHd9ahobjoOso/9J0\r\nSDCfhWl0TjelggnaQupw1UphJAiL3QGbv7W7DP5sRkbo6FaGuAH6/kEV2ii5\r\n/V78VtigckGZOUMQDUIfNY05Nz1ojEQUFl1a1mgIvyLFag5z18Ougbtf13PJ\r\nfY5hM+qBuzRt4A3AsP1GtksgA6yb1iVLCel5NAg2eTk1Hk0JRqhn28Bj5g33\r\neEev1frQ8sZHqwsZvKgl+kXmskzfeTPY/yApTHneuc/jJgS+83aSe3AjsL3V\r\nYnLMv00CYBto3C/sAIjlnSR95ZfnLvRUsOOxRGj5NB3qgevgzwD0XGlSXGt8\r\n+rCUn4R+yOqC+VuwQYlASpKlf4d08E1XED7pWZLubi6TbiBxnLjEncSLQeLb\r\nuDoAvR0ZhQZf6UiEgSojXpu4WSYELz60k2z6xx8mvRO85ucooyRpTP330Y9t\r\n2xC0vOoT1kWtXvIWuficU0616IOndR8zKjp5IGyW5nNDvT/klwbh4jW1tG8t\r\nwTeLUJUisFVeFVgKvWtjDhe+n97yLNWjUORTqbsDsL85wFJ1X9T0uGKULHka\r\nuMQI8xjnzi0ejnvoB+PaU4As2weSze/zOAXyudjAKuBRnzf6NKdDiWH5eSSs\r\nMRWVDIZMYUPMVRupQ6NxC/EIxB5oHqGGTFQ=\r\n=143A\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.20_1666199080978_0.20387893431706883"},"_hasShrinkwrap":false},"1.0.0-canary-1937-705.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1937-705.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1937-705.0+2a609d3","@bodiless/components":"1.0.0-canary-1937-705.0+2a609d3","@bodiless/core":"1.0.0-canary-1937-705.0+2a609d3","@bodiless/fclasses":"1.0.0-canary-1937-705.0+2a609d3","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"2a609d3c12f6ecf606d5a48a4a28b0dad5182e73","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1937-705.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-A88h0Q6Ilj07G25vif+5JaXxybdryIEszlv5NiwgWY1g7P6WbkelfLgTnh3LqjGJSTaqWjApOHv40uMVHmunYA==","shasum":"6423fc336362964981fc8ba7969560bf55f4fddc","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1937-705.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMW2/vMCEK2njDZT2PL/LglgLdttAZa9dHFWBscRPTrAiBtjrsK2q9QqFb0dimFljExoCpfrAdVLAcod0BgF+AAkQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUC/kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYRw/+MWoWWcerVAjPuVqTiLn44qK3Hvzi+2pPXWnRlUEJRiToHD3s\r\nBtm0ANacn0hlE0tNbiYGah/SnK9Z9AtYD92L9K3RFLqT+cguxqr5LBlraAhK\r\nAXg+gFzH+Q0A6GV4VBJ81KiV5TI3Zhr5O5vDVSFk1HdE11UpfvjC3lvztZE9\r\n/BnETYVo7vaSq3nwLwNLq1nTIOpSwWvfbQWSphGDbU4bFdBat04x1XxItiWF\r\nL8X4xZy/aIec8BmPuSZX90QOgbozqXoNWA/uQ9x6pR7W1H6+6IXNKFJ3S1J7\r\nngu/U8dR1xf6iCIjGv6ad8oKGrY7/uEK49W7AemB/bFMgSej6IyA9wdB7bcp\r\nuLJ2wTCo68YE76Moa8SQS8iMkNib7mY7sJdU5u/UzI3PMm8nKa+KptynIxQm\r\nrqYijXBICmjuvyWcTRJeKPXHq1HVIefF8v1nO0M9Ylb0jH6p92osQppSNqpN\r\n/90STK2u8tjzNW2X5/sQQSulefryLD39FPmDWB4XnAHCqQV/JINBuTNkcGkz\r\nfLM8rFoJvvZnQ9eiW0augVCMGng06+Qn4k7y42ebCnIcIeu3dmP1DOltqIbn\r\nViNenioEeTZkGloYMEVa0Z6/QjDkC3l+Y+5d7iEYu2E3oNXQZmaO5oDw00di\r\n+8TDfgOtcLv3BLEqtdLIrMHwgmdal3ftreI=\r\n=bBuN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1937-705.0_1666199523877_0.9911260498462802"},"_hasShrinkwrap":false},"1.0.0-rc.21":{"name":"@bodiless/youtube","version":"1.0.0-rc.21","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.21","@bodiless/components":"^1.0.0-rc.21","@bodiless/core":"^1.0.0-rc.21","@bodiless/fclasses":"^1.0.0-rc.21","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"382f46b3ab155c842a2121fdb9ea9391a874e998","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.21","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-J/tpmjZB0VXr/H5/N5GFm2+EwoaMvAZm0AO9GYnfg3XQwGWrYtKMHWdH5KNAxwv0g2EygfSi/y4GzyqGV9m+wg==","shasum":"fee942331b5d9f5fe269760d4a8e7ad1af4b6f29","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.21.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCV2FuYK1xsA/9H9MH2hBD7VSO8RW8TfbFjUh4PP0s9nwIhANfv8Gi89SP37NMNXTLgFTNaJOoPYwttH/9+6a2XxdHM"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUEKdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJhw/+JipJIsFvWarLEY7cT1pRDsiu+cOr96KdOlzogYReegEiU0YX\r\nnyVCBksMb4nPTvkBuZzYG19snOPtitApmVnQ2srBJWV1yAZ51h+ilxH2Qo3C\r\neljs8diNAjJD1itoiJARsbfJZ4NaOTapTkVxdM7LRofwZV6kJbSJYI4qHLdg\r\nA9xgq673W3Nxa3dZzIYIrH5uqvFTQF7n8M/Ij2KH6R1vbvCGx4iZD2xRypdr\r\ni/D8LVWN8865x+rlFoa8vxlKg6WLDiQIcQ9I7NcP1Ens9QlRQ43XtYl70Uo9\r\nnCkSsKYeP4h6iVSVYnkDA3G+uiwd0dYVUJ179kRUKumSc8TMgo8gD2hR8hwq\r\nE9vSkY1LTnFZdaOc1TuO480c2JN4MnQhmUx8QY7LjsKifirZfODvc9r29/wH\r\n+1Q2N33BVlxPEyzMQ5xvl1AWYFhmvgTbs1MTuNHQ7tqU0EaHYxSpG4iBx3Ot\r\nsHgCROz+IMC3jRu3rjwmwV4K7DpkeAddtWsEhY+a41JaVlMQc4ubLG7kUAD+\r\nHERCBMUOrbzbF/eUMe7TwgtVMUBBvyteb+w0PO9Yck18VdtQoCNS/AEXH8QD\r\n3LRZ2DwCHRonCfXvqh5sB1yW7kgA1eX2eZO4FCMfNcaFyZ4+omzsRu5uoJSZ\r\n3MTk8MDxQGdxkXMfSXMG1pMsYIvkvA0R2Mg=\r\n=RSbF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.21_1666204317076_0.3976686977661854"},"_hasShrinkwrap":false},"1.0.0-canary-1937-709.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1937-709.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1937-709.0+4006268","@bodiless/components":"1.0.0-canary-1937-709.0+4006268","@bodiless/core":"1.0.0-canary-1937-709.0+4006268","@bodiless/fclasses":"1.0.0-canary-1937-709.0+4006268","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"4006268ace79d6b67ca90dfe726224a0a8dae887","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1937-709.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-zOmpyg0G0lfAly5C2hg+gDb9RZvIBnjYNkasvSTZxdHBlrczFBc2ESyEbwgfn8dUVEQkU6T9NuyXjpooFquMNQ==","shasum":"56f1a275879e3421bfd2c7af2ed56e26b3f1e7e8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1937-709.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFuZTyjuPzwufEGEQ0gNi3u9RIvdDtpM7pG0JEy1uwLAiAvjkPWOQWYFxgpQkXTvHzdNNEimrZ9XGW20af59oBMNA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUEKlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZoA/+IFHqM6dzmsU4pBASIV7uuOnRGOK0/Hsp6ToUeP1tGDCeDi9H\r\n+AIkFujeznivslgw1XSMU0B6att9k/mFLalXTIS9mjXZQqIt4qEnfE/iTU20\r\nPtjqsnfhFinmbWvr/+PKYu9gyCdSjETpgXXAlbvFvdMpCWuzrNNdViguHrs0\r\ni3VfRebilpKhpSAsFTgD3cuSG3sslDV3oJ46DA2eJZiPWZ51veA5yc+GjpMU\r\nknhLalo0mazNaMLD7lFzreiIzlVLCW4eOzZ7DZXoMpBsKuWWYTwDupgbmtjG\r\nGwjbrItve65l/UI82wd5fJVvp5mXBm6F1YO4aF3GAa6/9xM12DU19/ITQ6PA\r\nUUClpVBuXR7ofYHzrvRCG89X2hyzZRF0LRCig7Ds11+eC2LA2t97FOtQqcTd\r\ngsHyxpDyvlvEyJaZiueUGXAJosFLTgi6VaM99FSx4Xbc5aYAhxMW0rXyhXfo\r\n0nByeLlCypBFCAdrRpTJ1QpuU5C27Rj0GSUMb8Vr6JDSBI6sm50mSr177YBU\r\nhTWgLgFj2KvdZaXOi8whUClI3i3QWJbsnVFQfy0W0+0toMvPQFJX7JUVr0Mz\r\nIpCcmpSB4g04yksnjL0Kjf25IU+zOfccSgNqbiMcu6kxe/EArQLR2BkMDra/\r\n83VzMoECNXrKwg/l8U++BglGFIhS056ionU=\r\n=skQx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1937-709.0_1666204325321_0.9692175869961956"},"_hasShrinkwrap":false},"1.0.0-canary-1964-713.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1964-713.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1964-713.0+0e4eafa","@bodiless/components":"1.0.0-canary-1964-713.0+0e4eafa","@bodiless/core":"1.0.0-canary-1964-713.0+0e4eafa","@bodiless/fclasses":"1.0.0-canary-1964-713.0+0e4eafa","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0e4eafac671c6c4cebc7ea3f5fdfacc10fe2b1d9","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1964-713.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-1UVeeVj3rjuhaK5CUS/Jh99CgK3j4iDflf2fEGJHwlYR1CSbUB3Gar1jr7J6FNnevtv4HjtQ3FP6LUtwXoAvmQ==","shasum":"21c3c5e829df84b7188a77ef3c95a8b97f25f5d3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1964-713.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcemoDnt8LnmsN5+7Vkjmg3eYB9bgFNZL0IgcphH90LwIgIr9jQ122tm8SJ6N7ZXcKd/sK+rRyB76QC+V0vwiWO4U="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUElfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOQA//UnHEi9/jUA5JN9LOtg7samCBDGfU0NJfz+nc1ZvwiSwZJx/o\r\n6OXfirLvXRoqu7PN8OpJRnlu3V2uioGt4G1HENnoBTTFUFYt01CIHE+m/QWv\r\nFL2aRo/QzFPez7f7DIlFrzr4Q1PQEmKd56YWT3erjzHy88h2wPEKbUPO1Ufn\r\nUGsFOBwo+TuZvgszUJSoI/UzrR/HsyAWe7NvHJrnjW99RsqtlpI1ETLgdW0/\r\nP34PUJtqLKQcRLcaXfkbb9CRTunacSBumqlQmew0N4OtY0/YOK9JxBU5ghoG\r\nx1rc5KDGTiXn5nVl9JaOUhKTmLv8cKc/YhIx8tJRYK+zMMtuDXL4lEuSKwGQ\r\nKSC8E5G2XwGe67hPKksBo2lxqEV4IhOHaAmL2+zumX7bSX0OtGjacD5kCmcx\r\nY6og4mCwEQCKuQJsr7oT5uj6e/4WKLpXE9v4UI9ZX8pvJPCdfuqKoRwabcFZ\r\nPBSvzWC+6eZNcUw0rtGHB/VdtqzZx68IfUR9QhgPBH7djEL6L0WG4TRMQtt2\r\nZBVyJlybd9fe6BSlQfE1Zx1bkCZ1tfb4UxFy2nNvkTZky2y4YRxKjWcmuIMM\r\n2fg6agxu6ZjhvccFeFwxvEReTBSKFF5pnWtk4kXO8euPnSsfbv+Y64Wkrrx4\r\n8t3a2nl8LeISxaYpQ9y62Kxd7ln85lMRUHg=\r\n=rg6Q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1964-713.0_1666206047126_0.6420900829245415"},"_hasShrinkwrap":false},"1.0.0-canary-1964-714.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1964-714.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1964-714.0+0e4eafa","@bodiless/components":"1.0.0-canary-1964-714.0+0e4eafa","@bodiless/core":"1.0.0-canary-1964-714.0+0e4eafa","@bodiless/fclasses":"1.0.0-canary-1964-714.0+0e4eafa","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0e4eafac671c6c4cebc7ea3f5fdfacc10fe2b1d9","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1964-714.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-6wR5mVg8pOEVJYn5D5DW/4i99RT545c5CKrvx/GXVDDynX16rTnle2S89Ejf7Mwqppskh3xIp5iy0HKj7Xqv4A==","shasum":"a346ea6bfc678e667a32e96670b038c2467de753","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1964-714.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiU1hVR2pbatuXVO+8//DcgMb2+4UOoawkTbb+Lp4jjAiEAhnfkBqnLnJTxx4kl+y3SG0O2DhyeGrslBL1SJLhjSv4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUEo5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/kRAAlD3M63Sp25nJ+C/IiNFBHwU80abYCQd4gk2yHyMX9YgTJvBq\r\nygUEFfFyNSrNJ2D20xQ/RrYoefvDTrZ6mrjN+7LMWQaYO4jiri8hhv2Z1g9e\r\nezjahEDYvozE0x+fSO0c9IqdDCGbxpvZ9kuw5cyTna9OjJr9PXnMnAYKFR7G\r\nW5YlYEVj74JnAL9AND7qK4usRqE9DrFOjcFB6IkdxCFOyQUJXwpVO4fSyfrb\r\nDAc9NeaFP+ufCQ3E1ZVPm0Wz5lplApZwlnp7HAiEMp5Ya9vm0HqqmMBm+U1f\r\ni6KVaNCI4ybnwWYdzX1YbbHyGdR6nCKym2AScPbIaH9J92ma+cY0XFMbZpmh\r\nMl2jmdfitw2XYrlMvnBnl8QPvDR6wbFKD6oBEJnNJWgqjwqGZU5QYeIAG1Oc\r\nXjsoiTl557o+1OMDGOkZ4uv+EMOsdt38KF9xV8Ii75DeL/fGgJHjJohI1lXS\r\nOhLUt1Hb0yKir3ZHv8c45aUSNkyU69qzpzPeWvn7wBuikfD8LHaGeSwqGjrj\r\nExHHlMImnb1cVrZ/ZTQKiePs37XxOMkBX8+z+Uq2geYtT/kmiV6GAVxrsLAr\r\nljAYjk0D/7VTz+qiWm8Yuog4IRsMjw+ZKQsRDj23WT6CVF0HU1HzT0M7YFE5\r\n/r1+bhh6/gkmENAFRnfPADNi7nS4TXehzBY=\r\n=6ebL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1964-714.0_1666206264910_0.7949918200001156"},"_hasShrinkwrap":false},"1.0.0-canary-1964-715.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1964-715.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1964-715.0+cd0d83e","@bodiless/components":"1.0.0-canary-1964-715.0+cd0d83e","@bodiless/core":"1.0.0-canary-1964-715.0+cd0d83e","@bodiless/fclasses":"1.0.0-canary-1964-715.0+cd0d83e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cd0d83eeceaa3dd347ae77802c305394d32707f9","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1964-715.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-uWuehOeMhyiP0blC8z/6efT013EIF9gcff/bjuRbI7DRYUOZHfwoAc6t1med9kgd4MvOy2HisERJQ4wsD7vJPA==","shasum":"4ecefab68da49539eed8089f7b0b7542d3ed3495","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1964-715.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXJUgmiJw3/fny/uMe19YyvuQheY8OXwFiCNmBUtBAsAiEAvm/yCUMAwrbvEoid2JrPW6N6JPR7rXoksbtL3rS/qzo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUInmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAIw/9ETj8qZadmoFWvGljLyzI88kgxNCaOuvXablcbLS1CbSq3abV\r\ncyCIiKdetrMZZXLUJbfnR1i1yhYZ5T1lyemMpk7zftCJWjcM0GF5ZdOTTy0N\r\nUy3NG9QBrOoXV4Zh9VJ5R9NaymE4b6aWwjSCBLZJwf2maHZtSsImphru9Suo\r\ndWtMd8FN5rsUIJnJ427qYVSfo8lfnevE2sRUCRewx/wSETI8hQseOdFD5nUz\r\n9AKqOwyfq6ZLJMZ/UHNRbUNzIy7ZpRdTq8jp6gnnT9wwnfC6tLliVtaktPQQ\r\nJzZjNqh9Lg8eZLoyrX+KDzm+LLbDOmRXp2PXtI6gTGdYKn9mYbi1A9nGGA8l\r\n6OTsYFQZVTx2fGh44bB1PT2aDRzhtrnxIHjQtSloFPPfNv3KgK/hJ2Jl6q9N\r\nYkMg0MLPeVXDNIZuxpUj5RTBHyG+pOso6hujWSGDebj5JTnohYzqGGiF8Bl8\r\nC9zdoT9jDnlMUjIuALsuI4UdxpeA4ZdtXRUXmfXJuiS3QQFPetd07rPdOss8\r\ngJb0nxMwB520VBwpsw5VO4sDul+al0ontnMvtjuA0Wkam2cIWo5dY1BLZH8C\r\nLCX6bFBJnUhYsmxhDaZlw70SDjOVpSnkN81L/mu4tnCvjK2J9r4VbiJtrLxk\r\n0oqy0XTvS0zwozPlPSegipDPmJemoMhylPw=\r\n=aRVi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1964-715.0_1666222566074_0.749719647259167"},"_hasShrinkwrap":false},"1.0.0-canary-1964-716.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1964-716.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1964-716.0+3e79972","@bodiless/components":"1.0.0-canary-1964-716.0+3e79972","@bodiless/core":"1.0.0-canary-1964-716.0+3e79972","@bodiless/fclasses":"1.0.0-canary-1964-716.0+3e79972","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3e7997236c9441d3b9cd18f653501e7e0395b1e4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1964-716.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4vUIH1kNx+WhCWel6kKP7sJfinm7gAskXljklcUvRWNtprpC2gGf+gw6WZLFaQHv4N9AWeS215j6z2WZYYBkMA==","shasum":"c8d6faf32fa7101ec7a21044c97897d6ff4ac02e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1964-716.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChOjgenUI2julxMlI7LtED7i5lYkIKkXQ5T0mGenpQsQIgA5dAKz2Ks2daQDqxpfoIhwLuFtOTEyX2MAyAAIm/eos="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUcZgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRIxAAoH78V9pO3RddEed/krdC1nrNUXjhBBF2kY5GnzmgtYpV/Qcx\r\nOvrOEePmqqBnQL21DAg4Wi+/Y0NBgYMhBTdkkdIL5oz+jYMUaXs9u7KtlUiN\r\nbtB8DerW/UDGlEcGlTkGYufmoFDqwNKohBolbM6NlhDvh2kqAXyFWbfMQzIe\r\nIHGeUimJ0hwLkczTmNpeE0zrX9l6O7qmxJJm+dk9F6/R9WyrMdTCHMJ53SqD\r\nlLS+KTwyhmxC2SGh/WNfqkBo6sFyRkbOHkjD4oXXjDUpwJMFjxsnfmvfktAJ\r\nGAo9bE9q7I1oONU02+tDFoLZh+IU42ukGIgF9kl3AGrg2pcpW12sedu/015y\r\nBrepRt7oCfUFG/NpitmtTgdnW30b3KA7T8tsXT8+hhKRFSYrlHA2A5ka7I44\r\nr1qPtAPQXuIm80fmtRHHKxwatSnmoMD09CfaU+fwketOcZW9XX68x2pumJaW\r\nxlexNxHA9rNvlMSYdiVT3WEYsySFyo9T0auF+2LoNet9QZXZRTt1HLW52GmC\r\nn/2i7JPndMUoBvmaXuiQJfAzcbMy8Q1r8jumsMzanJT+OCz+A54mWSfBGbfS\r\nfedpPfmAwIzfeHEROUnokQHmjF+oxzf3Vn5HI//z1s6fBrBKV1QKIQyYL+zt\r\n1xnZxzIFw8ej486HBPaUi50NZxkF4CClVzo=\r\n=aoa8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1964-716.0_1666303584258_0.7194259743474876"},"_hasShrinkwrap":false},"1.0.0-canary-1937-717.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1937-717.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1937-717.0+b142954","@bodiless/components":"1.0.0-canary-1937-717.0+b142954","@bodiless/core":"1.0.0-canary-1937-717.0+b142954","@bodiless/fclasses":"1.0.0-canary-1937-717.0+b142954","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b1429544bb36b0dfefbc7af46e9fc278989b8d21","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1937-717.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-2q1WHtSZGQp/MMZsF+3vR7rof+kAUEb6L/pV9GvV9COwOn0ECsdnnRP3AXowwcRw+TLzTHsmdT+EJzUytBfvWw==","shasum":"12d33aa65ee9671de75d6a65701ccea7f84b142a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1937-717.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDp6lsj9A3x9+jrLk4UYy10Rzt73Z3GXDztRqsAtGjqTAiB/TlQZaSWpDBP6CmQhFx93Lr2TR8KT5WjsBq1N90BAbQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUqNiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqo2w/9EXqOiCPBlZhjH5tZrM5CltP7np34pY4k3/OQyJNJcGPN03Qj\r\nx71KytcHo6nFpRXqN6wiTe96NvUh3ZVrhjashd1Q5HF5cF3LNcXxkieNDCyh\r\nwLr+F83Up3TT0mJwk9FwWYPq3Wb4efTcwse3SyKCPQMfC1aZyzfDBOIb2dAV\r\nG93e6y76q2GqXcbSTFLTpZEhpB9pY4mThIU64CVPgR0vDcVpS8zY9BJhUY9f\r\nxmQp8mW1SLRwSWU6cSm/i3/TdlyKuhtVFtrFKXQyD2vQl9AY5ebNaGmmP4XQ\r\n/At3/xqU13R0uAi1C41XIVQNjZB/wmoQipgEKnjOhYKJf7V4B3Ang9wFCAHN\r\nF5BcxqpNyeKjvmaLzZOerzGzw4IdW0Wg2T4ev5r/og2cIaast1ZZU8rgRwKg\r\nftkNy55xk/jtTte0gSI5nmtzreW5F65Ar0Qzely2wCIAvjQRRvYhKlGNBf/W\r\neKZuIby5nA4ky6RWNl4XOzVcg6y0QORHZl5MnD3GusGD8kV2awv4xbQuszWk\r\ncb10lJSCisNgcM16MRHLIVnv6Lm8UBq1W81rWAvh9fzwulFS1Qu6FAAF6IHT\r\n5ga86yClFJSwXfU8LIEZ78Vgcz4mI8JiEsLU8p7EglbGWtkxqBugm80aMRPG\r\nWUWi8vlQbPOwj27Tyv/aMKvMhPasaQyQGUg=\r\n=yTSY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1937-717.0_1666360162085_0.7748202232056711"},"_hasShrinkwrap":false},"1.0.0-rc.22":{"name":"@bodiless/youtube","version":"1.0.0-rc.22","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.22","@bodiless/components":"^1.0.0-rc.22","@bodiless/core":"^1.0.0-rc.22","@bodiless/fclasses":"^1.0.0-rc.22","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"31710a0afcfcb5def9bb7282f190712af0106357","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.22","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-tFkieRCnC1m1IpXjhJQ/YJoMDIiAEGr6rQWqFzB+OnOVXxMR4Oe/iJGJxyWw54+oDq/FDP3M55XqYtpUmavZXg==","shasum":"df38e107fdf557af564ac1ca32bd7e48af1b5b15","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.22.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaaSlhW/6iV/a0K919n764zx+WFFFLCTBbDcCEg1rpJAIhAKveua20qVJ7n5dp4OaekHBT3NYb5ZHRa01Ri5ryZByF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWvJmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIHA//ScXN+/8Lqiv+SHLC32Tr6fCqTCl52GmLRcozfQ7rJCtl8A5w\r\neZ+4rGbldCz8n/V8NX53cDF03UBgQRnu4J2AykfZ4dBwMnY2pQzA5VuoGPnw\r\niPbbp9SGUjuM/y8Yy3wIY4AISQeLk+WtPmyMFpkosbyiqu5vPN/RggWA5KnE\r\n1bS2lzILOHAUe88/sAb1fbLfw/LkLTrgVOXhEcxg0VovbIGk1znn0fdUXoGW\r\ntmgyn6NCuo6kaPxRa0fR8YrFMhuof0/WP+XeJLEtteaPyWK5u8eSS3Ww56wB\r\neXg+TWe+EabrYeuVOdX83cNjULiSBS7Dg27jI0xkUzmGf/DB0dsHeeQeWFmo\r\nVfJynigMK+sp5yTc2p1gVrzZfHvdXoxffiI0JiJsiIPCPjzv4NnuZysdmE4x\r\nzW3a1oypSVO9bS8ln36d7bXB8hTtLXbR3JUzTQm74RPacqFkGMltnYIL5VmW\r\nRoPziT36T/IAyoWTrTE7PYIZC4ao3jSE5CQ1kmSYyw5hBNuWHwf0hMfvW2He\r\nqElzJJH24QvtRzM8JJLsi70W4kPeIwy4OTr0o/pQD1jyjnehNN3I2smCpGjG\r\nBvhkN+gWbxR3pdUokQnUQXSLtP/xSAdUsNHp5Qbv2sGBKeWPKqQdoclapWzE\r\n+f1vLzMDiB4IiLnwHv/v0Ep2Kahxq9wVHVg=\r\n=plJq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.22_1666904678706_0.07358008775403246"},"_hasShrinkwrap":false},"1.0.0-rc.23":{"name":"@bodiless/youtube","version":"1.0.0-rc.23","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.23","@bodiless/components":"^1.0.0-rc.23","@bodiless/core":"^1.0.0-rc.23","@bodiless/fclasses":"^1.0.0-rc.23","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b4a88315ae7421271bc5fb7d291160f260fc71c2","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.23","_nodeVersion":"16.9.1","_npmVersion":"lerna/5.0.0/node@v16.9.1+x64 (linux)","dist":{"integrity":"sha512-8HpVw0t6T9Ulz835vQOEoZdyQGDeuQM93RZCC8Hxiyjisp0odBrrRdHVysla9FCA3/Ec3UM30Zh9aSIQItukWw==","shasum":"47ff056293a3278d413509168295496af5d43a82","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.23.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCe6e/y95NJ9lBpogBMXKYFxSN8LlxTgWE/Cd/YlhYD1AIgeALkzyi6s2prWGEc8G4bIZY0wq9W3kbZPJih39YGSgU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5Am8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqF5g//fIzi4nWsKvYdiKPtag9rljdNPTGnFHWZYadLQbf+TBseE2cH\r\n5yKaWaZjI/t7HsMOTmlI49AiVDfVvFX8i24u7afupGUmnr7cmaZmgmNYelgD\r\nhTYxoNQrflpYyuDMnv1hXDGojV2+Hc0XEyIQ9s1IFilG/liu8wsR7vCwaXpe\r\n1cxDOh1QDQtq2/tPrWRR1vECKWaTIWoZ2Lfw7yWjHHfjrTH0nItzxadj+ApT\r\nvkF9es7KehLdxZF+/PeKRAK+utr1z9B3GQLptYrOmec5bxkHwTp/igSlHA1p\r\nZaZv19aVEkxgUVXhlLp67IhrE/pSWl9f1HmrTLOlgzWpwGchdxYf3GLhdgBz\r\ntO191Ow9xXMG27qAgexhWW8bUUWJBXfriItnUdoa0xVWcavIFqytrGKwQsv0\r\nRVyrOUMSM/faU6beBHWgpSe8DTkuKIZ61Jwi9gAfMCc6O/Tp9O8h7SVOIIFQ\r\nArVGI4wmyjPMgVTF0x1z03SijIagY1UVy/LaJQtwwtbM386qzEUGaERsewr2\r\nYHg+Qz/V67l4SHTUxVQA88gzIgjfo0FEYALpfjn4JGc3r8SO4W/mJ7Kw8z7f\r\nf4aopCibumzNHb/bkC1+dMXxB8pYYfWMJwR/x5IQmZYISEboyucJnTrKAb1F\r\nuVDQQ3xwswNZ4AtVPBAe6XZTQkkwOV9AbRE=\r\n=NA3x\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.23_1675889083945_0.030072711865732238"},"_hasShrinkwrap":false},"1.0.0-rc.24":{"name":"@bodiless/youtube","version":"1.0.0-rc.24","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.24","@bodiless/components":"^1.0.0-rc.24","@bodiless/core":"^1.0.0-rc.24","@bodiless/fclasses":"^1.0.0-rc.24","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"83edb8f12c9a8c7d75c4b32330120ce0440b650a","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.24","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4wugpBFazvUk//FrUk39SXcZyYmtjfLJUPV8uR1T1baVJVTtBHh1qaLCR50K6cnRJh1G2NY6A+y5d8Zt2j3+HQ==","shasum":"88cbca425bbbdfafc98b15e8d60a4534be0e81b1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.24.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG370gfemA9c19AuS7BLs7qlNdMUim3AWDVpDKMR+KruAiEA4qD51nOJDiTMxBP6X7zX2LcJfOstZNsdW3JmUPphkEM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9rfwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2Mg/9GHK1yHTORAIct2lzQnJa2Uzkzu0LDPY5opQrAu8wW9DTcY2p\r\nGn5/e+S3i2EFoG0z76H76B5wUYW4SObS+gxpGe3xss8oNnJrEXZUH58j75wm\r\nC1wsiCkQLwNyA2s9RSZNfs24tsnjnd3EZ4BOifrbK2qf9LLGn1i3G+DuiOpi\r\nar7nUKi2YXBjEuSz8PVNeUWure/Ihvve9WrFgd8Wi/0OHRn1czKT7dZ/6bY2\r\nWD343n98hfSzVQlBcytwUkE0QsENxJJjvMjQohBgBb3nOCiHBrtdYT58WK8I\r\nKAJa85Qv3ywHoolka5XaIXUSr7Pkt6f46/A3nhLzndQmI0DIUaNxxwPcAMfi\r\n0T/tGRBqMefloHwDtAdkwH23mHqCSC+2OEKNiA148zEwB0fYX5CG46PrtKBK\r\nh8k8SCA19kog/XOUu1TPcZrxXoDuGRqW8OvVBYXvyfDma1woS4UMXdoaqTlT\r\niqP+oB9furffmmCN1WjiIasxPAwlE26qdNUJ1Z98J1b9zMpOP9M6Mkj57/md\r\n9kUebb3ulHY4QlPZDkBjqXIrSIQ+H58+nR8ZTtJxAqb3r1PJZMbaujn0ftEw\r\nh7hmz8d/2Bd5PRL5QkLuIDr3+43ZUczYbql3+37k6SbvEYiUkhqLRSH0WGWZ\r\nxESO1g17vSryUJqGRD5aQ8c2VO8AO8nICyY=\r\n=XVfk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.24_1677113328359_0.13457471171940383"},"_hasShrinkwrap":false},"1.0.0-rc.25":{"name":"@bodiless/youtube","version":"1.0.0-rc.25","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.25","@bodiless/components":"^1.0.0-rc.25","@bodiless/core":"^1.0.0-rc.25","@bodiless/fclasses":"^1.0.0-rc.25","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"6c7e4a9e4cc589f1e01b17b3f3fc0508a0f78056","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.25","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-GiSTLzGfBxBbd2EGKujRa0hz1x95NB2uZRNomG+fWZBWglBkEN9C3jb9WvPQqOeRjPa7h8hn4lCqzPJTHwIIqg==","shasum":"710393c457480bc50e4b06355673ca23ee9a7e0c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.25.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHT2XFCvcn2MQdHEg8fHnoMKm+FSyn2b5ax64AGP/+6MAiEAwskxSVnT9NZcr0cDcrTeTrqJ75hh+g3zM/5FCTM50AQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/sdFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7Hg//b33mCjysJPcxRZ6nRUcwVvExsC7ljqdqY5KWDt40eiQl2rLn\r\nTMNOBI09nXAlczD0CRZt3x3YRF1UVTn4FuFX/FQTyDoZgVrb+IQoyOCBPrQQ\r\n1VMWFhb7uDq7DnhMRJyTjSS0YCBhq9OT7zfL62+4bB6Xfa4n7jITDGtaCqVH\r\n9eJT1uxiPEwIMhYMj/Zzng4VHMY88j7L/3EoQwDK/kfZ/c+PRMNRjYMQGU98\r\nYvv8+2HrzUE+mQSFYf/KlZYlXTRrSEt6ISZ2DTdpLZ6ZJpmrhnx7wIZNNU6D\r\nUsnTgXRW9WmnKmozkzZ26Tio0gqHnrY1Rs3WU5jDoydeRJB8Pzn7N5QvrNCc\r\nzoAEdJy+1QKZCy5Hui7uD0hZsCd6GNbi1iiO+Sq99FCOBfYRtTcvfUioc1ms\r\nAb5JiiZAAs03W/ypCQsiCFa1f9VO4Lp91smE2lZ1OUsToLoh6+MoZOhhxO5Q\r\nPyKWAwaLzxYltcDe/sKHQJOm70RKK7P2SLHAJzkoBNXKhoTgVaAydcg3Frny\r\n2uc5bRhqtXY94CS9gGzR3uMzSLWg87LrZZ5hLA/WLckxIaN23o/7P9wVNdvK\r\n6dRKNrng9SuRc+ErEjqtJzeIB4OQ6Sq7qYLsTiIGSRFaqU1gS7MZ1hGjJElm\r\nCava0QHJa3xsnXuJFl6JUYCoXGP4SqmK774=\r\n=IY4b\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.25_1677641541627_0.9945761017821093"},"_hasShrinkwrap":false},"1.0.0-canary-1991-835.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1991-835.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1991-835.0+d6c4e08","@bodiless/components":"1.0.0-canary-1991-835.0+d6c4e08","@bodiless/core":"1.0.0-canary-1991-835.0+d6c4e08","@bodiless/fclasses":"1.0.0-canary-1991-835.0+d6c4e08","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d6c4e08b5bd797b00ae57086ee0ca1ad9a74a288","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1991-835.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-KywQE4OEjIMSYzvTljE6rCSDd1YKkcXAKx8SVvnSeNvs5unaP7fmlDlQ6otq7J0ZLINwHs/5kClYePXgaDcj3Q==","shasum":"940934083e4eec2a2cc2b62abc627860c891c2f0","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1991-835.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGzhgQQwqoVMRj0nYxskH2UyDudlvbYUDMvGhdlnqLaAiAMpEDextv5P6SjK9FgndpkK1MrC9qPrhSzPcfPJUNVAg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAKYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLVRAAnd0zkhq7G2F1qC+R2YOF864D1FAfs9wbgSDeh1XKD8q2UQcn\r\n838kIfy3yv+bQttC+Vnf13y/ougJDqaqT41B4Y9e+VDgr1uFe42HFvHnOamf\r\ng2X7Ia0UXNIQytrFY1r2mKTd4nJNRnbT3Q+PoD89UxoO/deVUdvlvZJ6rm3e\r\nGpJo224szZdyRRtw0qpDs1bzxAquyg7QqLdnSXWXq/KypSp1rbSxHdMMTwzG\r\n9sv23Xp4IulNCo9OWmjJ6x3MaFaqD40HdpcVyoOixWdrHPsJ2rGN5+N4rGiK\r\nCYh5QSJ6fW4eatlXLMrs1Dn+ftRDkr3eGfNGmFD4qiTAwAhN845jUl3YlAOm\r\n4t+rTAK04+L74zBADrdmwXFsH8Q+na3yivTNpInSM0urF7OsZCC9iTB+NqcU\r\n22GmQtls/wzivisCQ0NmQAPIulsrGN61qOoDaJ3CUgQIy6hEsDMLZ87B6cSW\r\njNSvUtkPcoXtH6wW+6zGp2lCesDv2HY77udPjCbPpBeR99N7ehGO7QIVB38J\r\nA71/GtsXc7QUWeObHtyD+0z929szGTW/7kJ1nDewVYQRG1gn1Qma3M4Zc8QP\r\nVesGM0xUkJPxiYi5xdzJxzz+O+GEpQnKnIdq0u2qJXCKQyPpX/MtJejtPrzC\r\nRlUq+oLpZLBGlgfYJI8PxSHPjBUi6Rj5f6w=\r\n=wiyh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1991-835.0_1677764095743_0.8955362397205182"},"_hasShrinkwrap":false},"1.0.0-canary-1991-838.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1991-838.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1991-838.0+e30774a","@bodiless/components":"1.0.0-canary-1991-838.0+e30774a","@bodiless/core":"1.0.0-canary-1991-838.0+e30774a","@bodiless/fclasses":"1.0.0-canary-1991-838.0+e30774a","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e30774a7cdde98c5e0d4793aeedff08c58105df8","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1991-838.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-c289Lq3yG/ti5aoZOElOP47osw6OABGPVWiQKDW/8B9o4TlNQPAPrYD9ysCRz7HoVObaGNEMQ7sL5M13GPq+Aw==","shasum":"1d8c19f576a1abb3521c1a46fd61b019db2492a1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1991-838.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0BmZP1Qac88PuB5pGADzS5RvFuLjBUEdq/M/OWDYcGgIgRwrkVSExt0XLZ/Nxr9FYt6FOLcc2WDtg2SzN8JYfzhY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkAibOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrB2Q/+Nj/5ey6jehbYQv5WEMqPDGUihudGCuikDC6V3Sy5dOn6QbUD\r\nhg9ynq1z+5Vwx4r4ChaKMsIRS7W6APqvsOyGyEYOmkm35iKiYqvY8/PgCe0U\r\n0qLQp4z8xCczWy47upuOmef3Mn1DUFXpiV1h5hEevQdLpFCcM84YoNJ+fZio\r\nL3felSDKerrVHsKaRzscDbTqZ8WhMIgkq8fRi7nMDy1jyoJZXXPMhOPl2Dzh\r\ny3JYKzgLrBgpNArn4Eyl34axoAy6h3Qd9WAS0nvh8ikLMzLvjtLKW0ZObEf0\r\n2mjmjpmYFqtCQSbKVg4FMY7KadiPWrhj4hqOPYAFChqIiw4rf0Bejropj9sI\r\n6/DAQol49uX7knke9838iOyv7zELxjWgc593Wy1GlTWS7yqxc6sN4jj+QNK1\r\nS394Y/3jLLwiyFmTMNqTVMvefZH8Wy1oFjYrluuP6ROXiajla7NXEEhTdkwj\r\nm9EKNbxk9rzSO5eGhw4C48MCScMlOgkwEyoZBQuFrbmCBd6w62yY8UzLL4aV\r\ntXgmH5skxQ6IKNFnfUaB9CB+swzEGZbuOnVvPyV7VSkcxwOdo4qlMvHPpVVm\r\nZz5/lVVTLK75VAj2KNm5kzI1d68WUgzu2o3+pIJbsdcLNvE7Av+qQff8zIr1\r\nYxolZV5w8Nnui6cciZ4nfkGgtgN4pldmhhM=\r\n=NL4e\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1991-838.0_1677862606534_0.0704467905747439"},"_hasShrinkwrap":false},"1.0.0-canary-1991-857.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1991-857.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1991-857.0+15a5fae","@bodiless/components":"1.0.0-canary-1991-857.0+15a5fae","@bodiless/core":"1.0.0-canary-1991-857.0+15a5fae","@bodiless/fclasses":"1.0.0-canary-1991-857.0+15a5fae","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"15a5fae4f7da621d7f2836d21cb48d936f9cdba1","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1991-857.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-T6ZZ19dc47RUW6OOJQ10hV1vYpMCrgYh1IKKQoALdimpFBhoJY1ByAnglG0sTGWnhcSr9SQZxrEVOCPl1ABFxw==","shasum":"06c39d6ec5ddc9a1b35848161d9a66e2ccd656e0","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1991-857.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9cLDXWn0jbEePEUm5j4CM2ks1PmOsMCb8gx0Fhz+lgAiAct4MbivGaATZw5FapJtBQygivk7OZafqZz0wwtDbeUg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4//ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtPQ//dq/1zsbqOSe0Md3sq65qY+TBDD0q3E1PGtN0W/oDiPS5k93P\r\ntEwC//bHYwWmRcDoe8BfpJEN2TuD8EbL0T1wwcoz/jnFNHT9TxN8hVhOwL4u\r\nIm6Yv0htOjHwbI0N42vm/llcl9bSUY2iz5IHDmH1sg9klm/zqQMm1mxREE7N\r\nJR/qs21Vcb5avkHIq92qGOCqtIMtOPbEdRkIsIfzNe0yt5y9ctPqt6K+EEFH\r\n4BDw3ghG1o5Pw28W2b9Ov/V0QixWTZjV8qouEFAtX56MLqQAHyxmki2Ge0QK\r\ngn9e/nj6dsG0fwo8q5t8FveUqcKHOTCLFddzzCnlHl25223uXNNszSv8gBJK\r\n1Ee4aoOWipK3nzGHzfwG6rC+ayzla8VNlAqlGVPrN4jEaZvgk4af7ZDkWgX0\r\nSYb/Pcf+ThjbAWR/GFFRNDdVw9G9k9Xaufg9dmB/RLFN+v14ADEjjN0Mb+k6\r\nrWmPBH1sK6pwHNhHW+E3iywo5/GTSgzb8SCKz41YAyF0p0ciNU7ygWSHdYt8\r\n2BHhOgsdJJrYqmp1glnj6lOCwk4SgUV590wS3E61OtzdqQJqLnhWcDL9Ousk\r\nYcnfrqu+6TSqUoL1xerja+ZD1e2kYItXSIvc4hJ2WE3ztHHktFefA/75M/08\r\npE7pjK3hp8vXwGCXPk3/ucSrjSw/F9FzYEY=\r\n=NFXJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1991-857.0_1678741503278_0.5318676425581674"},"_hasShrinkwrap":false},"1.0.0-rc.26":{"name":"@bodiless/youtube","version":"1.0.0-rc.26","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.26","@bodiless/components":"^1.0.0-rc.26","@bodiless/core":"^1.0.0-rc.26","@bodiless/fclasses":"^1.0.0-rc.26","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"f606a0583a6cfe4202e2b32636eac2fae0ef6ec6","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.26","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-vEo8JobDnbJxrA5bUfDIoqKxdV09PjSAKoGmXeIE06lXPJOedX1K4zJlhPOb12uojkDb3eA0kQwgPdmUOBGrag==","shasum":"ffc0ec6708234002a3a51095cc6dca46dcc1e2be","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.26.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpM0/ToFfxybi3fjr3yVaU/VTHR86LjD8l9KEKYEx8vAIhAI7Fsh7x568OLVVXy58Y6COCPKuSyGZed499gF4Zvj7l"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEPmfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPFRAAhK9WlRSVCOukVYzPaF9gTwgaXzSMOa1v5S8X/Qm0lYHuFHnf\r\nF03ju44fKgnG5gBcdMj5Kv879MXnuL55K7CuLpEvR4usbsEzegXUNnU5VMQS\r\naw5m8zk7kHio0+G19CwU3gBw2vm+pucwgI+PzJ5foIcqIgIN7zdLkDklfrAE\r\nq3yAH9mtffuKR7Cp3T3oIb8YQeot27B9maOO9y7c4CZ0AgQ+Gg5oVFKH+rWU\r\nLMvFjXbDNzVrqp8EHiyw8Sx76TSJCQ2p9xnmVBG4Piv80q9p1kISYLXJo/cz\r\n+JyOQ+J0eftIok4P4OhqBpgI6/QbHZG01YDQXzYAHD6IWEXhDn6J5ivaXQFl\r\n6clQnhzQYVQuPBSHkSOdgDpVaC1j+AJepMtF5F6zTYKWV2/ged5FC5sITbgA\r\nuFKRYNUrv5hu6QX4KdekP4H7GQh+AAE6Q1Iz71hB7TqyNsT5S2LXOosPJ+HK\r\nIOmnQ/dqd/bGo3Nu1NuqoinOElSztz2AbBYj4ElUhIzPtAe4X3mG+7PslzGW\r\nIW4HuMA0Mzm5ZA1i2cGu/WConQd36gcxsLDEQL8XJBHLghV5rmhNmUj/1UdL\r\noYs8cT3UWTwg9VjSgSOa0zR3yZ2ugcT5zUdDFi/dBdTtjG44lWNM7uzls368\r\nGvS+Ct25a4JInda9lDP1WBGJXvsotr1u4sI=\r\n=jYxj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.26_1678834078859_0.6286704643366714"},"_hasShrinkwrap":false},"1.0.0-canary-1955-887.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1955-887.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1955-887.0+1b0b414","@bodiless/components":"1.0.0-canary-1955-887.0+1b0b414","@bodiless/core":"1.0.0-canary-1955-887.0+1b0b414","@bodiless/fclasses":"1.0.0-canary-1955-887.0+1b0b414","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"1b0b414370b5c3880548b02c2b7047647ba8dca6","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1955-887.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-+xHS6Ea2/Ot8sx/9vTL7Zddpx51pZJNyUWYPOPrCtq25o3rPAyS37CbIspadG0EihkclSe31uzVnteOMVasuvA==","shasum":"6e072f916f5fcf7ee93840c156c48c04027b6281","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1955-887.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEj0NA8zNvGYsbhddN0erv8RWeKdO2wcWPUWyBfHQb9dAiEA2/foTtDR+HI5zHS97bulsXorgzavot4h+qO1sJypKBY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkExBwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptqQ//fVpCoMCNtw5GiDiUqSS4OAzH74Bbw/gCK/FUIp6xNbAuElB+\r\nOoov+TmL0WiAKGzHRstnguZYQYNEpGkTtDGBECaqgyFJ3t1T0SMfaB1b8qRW\r\nmbBWGoIKrLiVjYzaLRGqD/RazTDQU91W3AndxkNsSTwbnWfzaLCcGPTPr6uE\r\n3GJVn6Gd1fzDuaFmmYAV2tB7Brv0ik9TV4+xqPjEYIN1fJGtZ+5igUgv4WeF\r\n7hB2AdikZeSYrXu0zmU7vbQpCfSCyJ0wC7dWMkTGzr6v0XkUNv+s+zMd3n1F\r\nRsZgOY8vEHsUOH+x2SNOXCycJF3hhilxdF389wSlY3mV4B9dsSsC8Znr+gyZ\r\nmF13zeXYQUANoIqLi04uGewAMmGbo+rSPG2KaRYJZn9+07MJH9iKcV4fWB1Y\r\nYZBb5xukPx+veiSbwLBpuIWhKaj43fkOSx8TlReY7BRVldkCI1+LUBfmxpi1\r\nJ6yBol/BbTb0nG5Mw0t0MbhI1dBHb7F+xnpomnBvXshMib9cQCi9rZ9f83iu\r\nwRtasGyfsvMeMv6C2yXaXxIgyMywy++X2kRmflX3se+HC3TbasKZLtmzs+eJ\r\nlyMMqnuNQbKQe3Q1JSHzpBrmzRn8JBj8tP4KyfnTSfn4L+K6pC7MSSMcqUYB\r\n/qWsI1VH1peAqz1jGI97Q0VTOZai72ko9+k=\r\n=W4wG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1955-887.0_1678970991884_0.6209586757512595"},"_hasShrinkwrap":false},"1.0.0-canary-1955-888.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1955-888.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1955-888.0+dd6bbb7","@bodiless/components":"1.0.0-canary-1955-888.0+dd6bbb7","@bodiless/core":"1.0.0-canary-1955-888.0+dd6bbb7","@bodiless/fclasses":"1.0.0-canary-1955-888.0+dd6bbb7","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dd6bbb745a0033264cde161b5128381e21c17b51","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1955-888.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-eQAuDv0++rs4sy34c9+yBV8iwpUTlfrxLQf1l/cW6lKvBDV9XAVcxcPNosVkYpWj6MfSCYk4Cp2kqs/JVKvlQA==","shasum":"04581835695678b6bdc4e135612c4f4883d4385a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1955-888.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDD+E1wCIe9/6A2bsCZKjvTF29/DbZ3qb7zWLD+o3iMtAiBR/0bybu/9gsXsVb9nYsFX6eEzoK+mQ9LNnln2IEqKSA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEyRlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYiw/6Al9PBfZ5cfNBpr2XBHM9RSLzSCTzdH4NgHWybdqO+ORQKcPp\r\n9DAwTulGq9IhqVUiOdb9IHuBwmEEgwND7FjR1xIOKwABnVhBPn/8ecC858N8\r\nVxdyk7mjZYlhz6deKTd7dhYaD6g+o+BBs5aq65VjSokbC/17aVn5EwulXxNl\r\nEwXxUH4gfX9bMfvqiZ+DwzeW7xV3on6CXuTwTGoPFzC6qnLpCjVINhReavHk\r\nGN7JEnGTGiL/YrxkM7qtk4MtNODvLsieOpqUebSb/lSYzU4jwDRmd+KCWO3I\r\npgwECv/R6asZjGDPT3Q8yImdxgQxA2gjWUytvj5aRlUAuUaUOIJ5WT+EeMTa\r\nqWAnoeVaLHWlUResYJpXLV6xWjcGs6JBMYrbn0R9vQ2o24JzNdMrucsh8AaL\r\nTk20rddcMGGxwgGP7q6APtQaNDJFebkWCLCaO5AOc99mCyO8G7ubyc+ffTUa\r\nvLKiMrrJJBwOyxNS689n0OFxwoFpgy8mc4MS1/tmK2ZuZRV68xcDbOFsfbE1\r\nvJnb4TkNImZo9kkpDlnD4gU2ivUjC0GPnW3c20v9uUULuY0qkxuz8HsFS/Lj\r\nlmOVOC5d/oI9J/+ZuWiyvx4yKKXvUnP6l5JcEsm/oQKAclfVJHOMGMCumxCa\r\nMn8CzMljjMFZW9Q9p9mnnw8mCzg3xAlW2NQ=\r\n=4chS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1955-888.0_1678976100862_0.12639055047082315"},"_hasShrinkwrap":false},"1.0.0-rc.27":{"name":"@bodiless/youtube","version":"1.0.0-rc.27","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.27","@bodiless/components":"^1.0.0-rc.27","@bodiless/core":"^1.0.0-rc.27","@bodiless/fclasses":"^1.0.0-rc.27","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"3f30f786d9bcb458478337f5d44e216c2ce81bc5","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.27","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pg1a42xGLXI90QDSRk6vB1zNPohgyNEXUBc1qyhtquSXbhfvEjtx1q12pzqekMxtmZ7C5/e8SZ/q6vCXwPs58w==","shasum":"cfeebfd5c442dfab14669a282f5bb6d67ce61fab","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.27.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiXMkOCUkxVo0xYrVEpTkFDSxUhNq+398pD0hQ6kTlAwIgBZgrRO3QGVz67cJ7FWy5D8nBejouk9EP9GrXnKyaNGE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkE0q+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqFw/8C4PRiSraYpb4XIcdoPAd7y6BlXQo3zUamCq/S/jA5eTPgVWC\r\n9XanpKXXS61P5YNCUHYTbnwQb09Xs80Ykw2yDyouq1l0HxWz2T7ngaUzjQrR\r\nPB1kUiSvxkJkMizl6K8b464z7lk0iEHBZTXz7GyYa8gJppoqZ7XJ9KifgdI5\r\nlsdAVqtaS0DIQeo7h37YR+FCKZYzc6+Ighb/uF/fyZB75qoFuqpq00MELavg\r\naziRHamlv1d5Zouwqv8JhEvgd7POGAQZGub4qIDOuO8l30ip4EajRlJIEd4j\r\n+hYp0wkoJiIE9YdFjYrtvQ3DP/mElwF2b75fw6eWw6xJqzUV+mPl3JChlkmQ\r\n6Bstj2bRCduRhXk7Z2FGksvMuNmcWzhVkOracVevzpn6V14PDQYlp0MNEaEQ\r\n9CeBPYZoiznHgzmHlVxZmiYDacAHH35YJCm+I8QH3+boNpoEh0NDGP3I4f+q\r\nyvv+33QtKQO0Vlh9DC9aqk3zKt3mSOU6c62nukR+6jBgk5oHF3yl1yXcTrvu\r\nyE3MNbklWGUCN09eUlpYxsqesJJPNjaJT3su8f5S4PRsdtQKMf6AyaXoW0N9\r\nM0UlVDBgdvCRtgrbnYUTsxtb6PqTq6QlAbitnZEvNA/Af+ROPwrxExSNo3mn\r\nPqW7FB63g1BJuwzF7ykM3i7h9p4YCATXfO0=\r\n=1txx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.27_1678985918290_0.023073398280496704"},"_hasShrinkwrap":false},"1.0.0-rc.28":{"name":"@bodiless/youtube","version":"1.0.0-rc.28","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.28","@bodiless/components":"^1.0.0-rc.28","@bodiless/core":"^1.0.0-rc.28","@bodiless/fclasses":"^1.0.0-rc.28","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e03fb802673d7efecb632d9c40aa240c927fe591","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.28","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-1Rjo48O3fTMcpHS1QZmAFPd8/M+6+ktY0h7IRBHK7kFL4im0YQMyLmRlSS5uxjBrL5gNeFFJPurJxYI7UnDaDw==","shasum":"1c8b4421e2b643156568dc1b59a764af13942dc9","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.28.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDA+7raZd3jjlmduqnuFMHxZGdI+vg1yVh4uw+0qK0gIAIhAK6YfizkkeuXYxNrpkFBBjvh3n1O1wUMeS/lCRmFn0r1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGG6rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTTw//XcDjG7BYTdkB3YwIGGaof4gQliONaXnAs9j1dKX3EDAn2OZS\r\nw/8zJk9H+BwzpgXGhIXstV5MGKWK+HL0jctsQaQ5mybWkb796e5GtB4VPeOt\r\nYNoK4o87h101nkQWftMo2iLOebRran00kJMUr365B6alL86WpCS7sLVHCLol\r\ngtfJ03CuzfcyJ+HceDMiZdw8bJ/T4s9nOTQBpltGknSyECiVjX4TpbYXmvJw\r\nds59tPCS/qmtDN2J//g4uHs/ne0BjxIXAzmjDfHJxInrHMBuXgsHVtkWtdTr\r\nphbwMD0OnWB/TwQ9QMdpnJqs3yz4gaVaYWow7QfMT2qC/bsfAfxvAL3RIk1L\r\n4BnkBO8EIlGpfB3UgxeEuf8SJIciuqB/3OLbkrMz/OTbRBnGiUVPhd6QR/Ja\r\nqlgNhKtNmzVB3gRckRhcTCuEGgjO3Ivjg55Gw3hTxWWQS4sY5o03gpeumXED\r\nL4X291gQKWIKq8tcHgwx6Mv0R64JsTtsdLBAjCYf5NQ09GsFbTV0wMkGc9Fr\r\nP5PH9DW5AjamkPajzs80Cp+O3xby4o3cO+mnFcuEKSZ4I4J6OkOOebL8PiDF\r\nsRuT0SGR8qb/OxCQM7+5+ZNYZOgIG9Eyg7hCLt9FePVb7dyIdq/RRW5t0Cjy\r\ngyfiSZ1m085YYCU8JklvHJJQo/OMY+BW2nU=\r\n=B75d\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.28_1679322795362_0.9120439935848692"},"_hasShrinkwrap":false},"1.0.0-rc.29":{"name":"@bodiless/youtube","version":"1.0.0-rc.29","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.29","@bodiless/components":"^1.0.0-rc.29","@bodiless/core":"^1.0.0-rc.29","@bodiless/fclasses":"^1.0.0-rc.29","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e690a9bd7c55b9fc374963d14ac82f8286e6501f","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.29","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-lVJoK9LI7EasXlvuXuJJzLGPJW4/wRy8nekym+Wt3gxXmpGjFkzYXOIKeIQHsCG4euU9BIwiCmth2dnvMOHVZw==","shasum":"337b4e33466cc244fb0510c5f3b87c6d5622edd9","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.29.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICNvdI2qL/VA8JhkJNmG8VVDZc4FxmoBagUpi3Jy66Z3AiEAsCtb6AHz7Z1K8EGmposN7IdwWSlSo5JTFWGxv2t2WQ8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGkRmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5iA//UAOFnJnfnV89DiKumX+vkC9ylaUw+b94rI/eZlAMjpF2wzbu\r\n0/IYFsKRmNj0YJBxVFsrd7FISiiMvXpPElVMx3gWW70GSVkTGRv0+KkFdNB5\r\nIIvmaR4kvf8cdNneQ1J9O6ILlI9Lm1LIDlQaXU7d7yPHKo/oJAR/Phm+VH7/\r\nJNOS+9XsnS8h/1lKxWyiSls7J7OVKn1NKSdBsQBhEUMJLpy3nAg7tI8aB1QB\r\nnHfEooFRamnU9LC3tJSiaEAC3hTT5u4S9jrBLZs8xoopcPwuKftlciGduHtX\r\nvRcKznV5z6WzW/LkYxsBUVLhs4yHeiY9T7Sf2Q/JdAEeoH1z6TUJfHP+5InI\r\nMF9PlV1E9SkmOEQZmUxPoe5mknu4GZB24FLlzpg7eAtFIfqaxATBZJ7kAkw/\r\ncC+VWX7VvIrppJcYpkIch8wTV4+Baa9Ud+E7q5hagqSCTwpUQVoLr3dGIIp9\r\noCwrrrt8ojjmm9mIwfqSGxONaTG9CybnR7qUshM+XIQfHWLyeVUE43E4nSl/\r\n9WTRv7ZpOhRVJYvR/F5jiS/fZ0M44TMov3u0zhB15t0nFe4zYx1HRWYUQI2t\r\nmh5f+NKG6n1VeNHNuSlzcZht/XQB0DRX7tVjbgQZt4C3GvRqj+51pRNwFUKp\r\nho9exKoJpIgRx66uoxfF35oZBlbeiRFUGL4=\r\n=VLuX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.29_1679443046647_0.45337893233409154"},"_hasShrinkwrap":false},"1.0.0-canary-1955-936.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1955-936.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1955-936.0+9da9918","@bodiless/components":"1.0.0-canary-1955-936.0+9da9918","@bodiless/core":"1.0.0-canary-1955-936.0+9da9918","@bodiless/fclasses":"1.0.0-canary-1955-936.0+9da9918","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"9da991894fa24375d3717354d31dd749f2322625","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1955-936.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pNCUV2KuB8a/ZNWHMR4mLv8SfaUO+IX+LMr+APyq5bwiMs9zFdGpGeB0CumclTKRubttLxBHf6XAPB+oO5Z93A==","shasum":"8329e921b5ff096e9d7d15bf882489f34004841e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1955-936.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUEnkJrINA+fZ1Qt+VpHTGSIK075bxacP24tT5tXe21gIhAMWipuHJID3Hf/elgUZXzjEHBdQol4rBwsra/G3Omu3G"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHK0pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNVhAAnxA+RkAa/v8PsBtSA5CD+ZfUfmAnrjorwSRoOH6g1t9fG+MK\r\n48qqexmWV6lgHSWRHOSVc2ZKl5JSzEgzFT7UjYoFvbqWFaCleHYNFfRzyQ/D\r\n3iCWnptRWwsVLL3Q7w84NUqCHxc+uz0zxW2Gagun4nt5N6++AJlSi2c3uE8n\r\nwC2vGCP2rDJjr7wDics9aTGSHEkpCPgct2Z9ebyvIT8pn5ohuA8xV95QlrlN\r\nMMcfZ6axtu0fpVQSGOhc/js6sb/SyyI4M156Z3xFOOh2BCOW9z0L6NntsOtZ\r\nbeK8SOF/1vwxTvYNE8RMFelsOAaGt5zsw9iorHEtTQ87nOdwf/e5ZxmW0MLP\r\n1j6tq0A5vwUa1e4JzuDAof+wRlwLMThCrMn+5VILgwA7S9tyjDP6iNueyTh8\r\nGfK+Eprnv92TjlALJcZtpwPx42LU0M9KMKGKybRF/pD6mrKNASwA7hyEo9cC\r\n4IdYIN5NdzmIgxlRWGDW3G/SwOWZl8XVTQQOgzoh8bMIjZdAkbPS9DDqzkrg\r\nNqu3rQJeVfFsKnVuPVbjL1P5w3JpyxfWpyu9OR9o1vSXsWvi6rZbGRtgv4u+\r\nWPD44tB3FJoJ7kLYCFmirV/Hh2esq0Y8qLzm2hBUrNY6hufSEVNjs40aY30J\r\ngY11oPgtOmMegbwT63CDjx/2Nt9T9Ee4VR8=\r\n=v7fb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1955-936.0_1679600937443_0.9542524917119177"},"_hasShrinkwrap":false},"1.0.0-canary-1991-953.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1991-953.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1991-953.0+15a5fae","@bodiless/components":"1.0.0-canary-1991-953.0+15a5fae","@bodiless/core":"1.0.0-canary-1991-953.0+15a5fae","@bodiless/fclasses":"1.0.0-canary-1991-953.0+15a5fae","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"15a5fae4f7da621d7f2836d21cb48d936f9cdba1","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1991-953.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-PT5BSrLXoQhHtoCky5aVJyV23hDi1tFXmmeJayubf1Au/f3vhUn1LU4Stxku7/qpsF+pFmya5gHRwH6Pjyiu+A==","shasum":"7ba33bd4b151bca4fab167b2764401302a0ef987","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1991-953.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDm/KdXnOrgVqdvQ4t8JdmGtQoRmMsYIo/q51A++5mG8AiAamwSqzCUDhhpyeQGZAnnje/CJY11705y7RDV5O04GOg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKpYDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxSA//T+f8P36FSS8wAeOHFxOAi131gJrguUHMBjQIb3F7dgXvu8UC\r\nbD2FYaF7SL/W3LfE/sCRQh8f/j5tMDW80VtdkCbkIVNSLp5W1sz38fwLIFPA\r\nEGLeYRX9h41solb7tO8F5PNjzvyzm3EvzE+hOczfZO1OxXYxRUTUaDpA5o+8\r\n8K6qfKNgSG/+UbANzeFdXj8bvQD4MaZDLO9MxBno3jwwgifrgPFR/nAS2Nsi\r\nNFjmOjOFLkM/xeDp97Nq/mMLm2nNEZ+mPmNseV2RS7rN0f72Fyozn8OWYRr9\r\nQ1KOHn0EIqhXCtwInZvEMu66yt2k6nG3L2gyP34BpaXkZjAinxDJ/JhPnNPv\r\nXqBY8habHfHS4jbFRcoix0Ap//a2t8g0tstJmk74DkYsC/PliiBksiD95qOQ\r\n58iZBBogdEEymmkjtFRPjRRTR7PYeb4fdZ7tFq6vl7f5JaBQ33M6OpM5zsNd\r\nusOtW3U+/A7xzFh4MvNx4iT0aa4rjAYqksk1JatSf84fpzCIb/y5a6hiPaeP\r\nWEtGJ1RVcak6LcT2C+mklB/fAoOFHPWHME3UmOk2+a5ZyWg2MgQFUDP4KWTy\r\nrYRjiodc2NHKu6hS7ZNxpxNWa7YV/wbTQ2zWW1lHYynNz0lvJywTQR4XndcV\r\nsU4umMRW2HYDDvsgjgLZXnJErC2U8G9d37A=\r\n=Hecu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1991-953.0_1680512515453_0.7265139355787438"},"_hasShrinkwrap":false},"1.0.0-canary-2020-957.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-957.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-957.0+5864841","@bodiless/components":"1.0.0-canary-2020-957.0+5864841","@bodiless/core":"1.0.0-canary-2020-957.0+5864841","@bodiless/fclasses":"1.0.0-canary-2020-957.0+5864841","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"586484160dd3c28e9cfadb7a2b684f9b4eaa6b07","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-957.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-QN7iYOehjvX5MRvrVX9rL22xY6DYL4B99xYb8fRrvEt2AuC4a7cDg976l2r+gYEe+yh3eEaNu1yNly0YeWGmiw==","shasum":"f59a7451f2366ae7f37fcdcbd85707c8da90d24b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-957.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCl3utrhGFxxoFjvK9fjJsS/xhnopineTlSTEdPrFMc7wIhAP/w+pXFEAifuM/oYdy0xA5Lknu2ReUGsAwZG7578DzG"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKqYmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqi+w/6Apmn5pdRnoKib/xhfpnkz6uFi5RFjFscbph5v/aCyp7DIDyW\r\n+uFCscoydrPEBwmvDRrJ/gJj6xRCsnxtLeW/iRXmJD4c6dhgb230hIXU4/7k\r\nxD8+1e0hpzIxOsiKFTcc+5wkkA7HBw7AFpdWBjRXeexlRVQ2u4RsI4VdrICt\r\nWiJpmceEu83yJxVFsieBEuvCiRBFrWf46r9kuzKge0YJt14mgE3FyHDBkcno\r\nwFw3ZJK3PzC2dg7pffb8MKgc4s4JShy9CsaEMq180RWHVLmwoJ82HH1H2ELX\r\na+4ffuMQCAOdXmFsPQY5DSoGgUj6njYN2Gs2erwNtBiZWPBWYzOCZ/gjBq65\r\nvSvWkuhi87gfCgoUwTIcaaOkWqLwKTgWZLQJv2xg9MPqxDWmJKhgZK2Gy5xY\r\nfrUqNR9MPumX5TFQ0kFQtTW3LzR83iE6qhAvFDZh9+c+Ih4wPnyoovGzBJe4\r\n3J7uApnv3S5M+jalKjnSRydddAm+LA9P2gQWCVl1TQVV7+Dabvrf3R00HuKC\r\n2Lcq0NtBLk9UtZWdjg2fR0cw8ici1FvYbt4zUcgnOIfvSHDevlimFrx5FVTl\r\nG7KXmLuIE71lbZHUkr5+XEYgr62OdtwbE2QeJNjW8NPpFxkFEKuZwgs5EsZJ\r\njSR5N0fdeajuDB9LL+QkddjwdqjKri3GCaI=\r\n=Mx+X\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-957.0_1680516646291_0.16096707482110628"},"_hasShrinkwrap":false},"1.0.0-canary-2020-961.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-961.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-961.0+5864841","@bodiless/components":"1.0.0-canary-2020-961.0+5864841","@bodiless/core":"1.0.0-canary-2020-961.0+5864841","@bodiless/fclasses":"1.0.0-canary-2020-961.0+5864841","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"586484160dd3c28e9cfadb7a2b684f9b4eaa6b07","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-961.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-etZ+o5M4L+AMl1LwhZABXGyZCKIhyrBmOebiAEHbeNhWSuuezwCG4qI26Tyjr2MeWm9/zLLTjyuatictdLAXTA==","shasum":"0e78e4389ae7d3e81f2711ba323cd704def60240","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-961.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCE5C/xUz9yqCEhpidZE6OSsfzRihyAhDovK/lW/UuMOQIgZgxUT4sE3oA0MN++9FYYFkjv0N9Z+1Kz9qG1zQKlg2Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLBZCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1vhAAmYj5dEiV0gpZ5LoxbzlagIyllDea2zbsHgM80V75UoMLjSIt\r\nUZs+nXy4xbFa9GkjW/wtmU5HSuw0NhMMZZnjttUi4vHx35V9mZ0vup5tyMto\r\njIKWEFKduobASrentrg1bdUUDp6SG5rWhQOn7RXHZvS6nYIOcqUgoCmdJIUw\r\nBgzGSpKejDXRE0u7UvrUrRqU8/so2+mF0YKCfoxhV10rHgmeX3HuzFXzpTyV\r\nAHB7iYSP0RwYMb6iUtiEmYXD6s5xUwM5azHwXM8/LBhSwDsty1N2hNvcQiYb\r\nmo88q2YczaCkPryIqSEemZswhNqcl7LsVxUkuBhtU0ywl9B4fZjZX+LQXDOE\r\nUCbhsqq81D68bLWbNJ99n1dXfP+f1F8YbNfsSeJHERNhhSI/aV81tNxqJpWt\r\nKUx8fkhNk2h2ZXnEkBCy6HM1blZDIVoD6/Tch9x6Woe1KPkjxyubxTGTQCTq\r\nnpUxGVvUeT3puinyrLtJ/WHf4tSZiqaWlxaZEDot24aj8p6QLmL4tBhAzp+J\r\nmhxCHGnV/tJo73pqCKMyDZHk0y26X14Pcat/RpAFzt9ACDrp1Ge+I/FHz3XU\r\nx00SfpwLI11CFEVs6MXu0Pcu2oIiEqwbg0soDJrKkPoH9DjKJndqCDk+6bTw\r\n9yDn6VtAAAHrpUJChmHN4rwNOq+9of564ac=\r\n=pdsR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-961.0_1680610882461_0.39099207817903214"},"_hasShrinkwrap":false},"1.0.0-canary-2020-962.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-962.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-962.0+5864841","@bodiless/components":"1.0.0-canary-2020-962.0+5864841","@bodiless/core":"1.0.0-canary-2020-962.0+5864841","@bodiless/fclasses":"1.0.0-canary-2020-962.0+5864841","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"586484160dd3c28e9cfadb7a2b684f9b4eaa6b07","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-962.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-o+OBsHLvVxH0DkTTpGZ+l5550e9M5oFGSS0UMNSf2xMdyiJ68jKnCnKeAYqsAkdP6bUzg1fkERpx1ing1EEY1w==","shasum":"66224e00b8ba1d20ea598f65f9d7a3ce2fee5f57","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-962.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBPMvXagNez3tcpxADN9XjBwuVBW2XJqTxAeHZQ/pHNgIhALX0moS9q2GGLZBaMXcLhaUjJ1cmU9cqGqWJAEsj4kr7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLBeaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqftw/7Bas2twDreEZxUwTzfeCGpYf+Mh8GEFx5QJKcuWezpP5WuMES\r\n+8Pw5cW22inY4LlL6a+0hkNrbUKeldjBdLfWum+NzHIn1sOBkOMUBFWWGM8c\r\naKCRMnKTVl201zhGWHXNBiJi18vbaDsVyvjoLckr+h6KyUR6bIGU7TQkTSlU\r\noAr00pUP8LscgA4fnS4Tl1JJif8iZI2TxlGp2Agtj5BH9XcN9bTUsrkT8fmF\r\nhQD+/BxJI7EatvCR7wNlipJASPbD4SXm0s2I1fiuSqaHsbLEJSZ83aKfkEd6\r\n/Fkrp0o/OVoRJWj+cmhHp0iGzCRJUQIg1DroMTewnad0p2GW1iZ3OkeYoGDD\r\ngneHNON8UBbWiajSpFsx+NyxexuXmutW0cZmCd1cE0R5Xy0RJMyX7yULUo9f\r\nH+/7tY9N+kgHC9pa1YN4irPZ+tlLeNHU70rfW+/R9cqx8nC/9YWv+1EOwb+I\r\nOow9dfvaz2s1MLrX9N4eAypnnv7BJujZyxwHSW4heql1f2fow96bhinS+RTT\r\nJXMZhovD1MUD+HLqgmATBLE41Fb18sgAZtMLD2t2JM/Ifv38L614I2Oe0sZ1\r\nF7dRCo0E0cp1ifAyovltUPKOC9RAiuSe2R4epeLmnr1wUwO6xHl8XZ+zyS59\r\ncjZmsi4NiN089LKnBWgQtakhgkbd6L+QsDE=\r\n=VmZM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-962.0_1680611225739_0.07629137825161236"},"_hasShrinkwrap":false},"1.0.0-canary-2020-965.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-965.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-965.0+01957fb","@bodiless/components":"1.0.0-canary-2020-965.0+01957fb","@bodiless/core":"1.0.0-canary-2020-965.0+01957fb","@bodiless/fclasses":"1.0.0-canary-2020-965.0+01957fb","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"01957fbb8f40f573338bd700a57b5f65f73b8a71","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-965.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-E4Ndx90TK8SN176ACR1qbUANXUu5nYVpyoMZdTLKw8BjTHAilZSAtQ3LerIogfdfwBi1En3btCIoCKsN8z/AqA==","shasum":"8f284e63005678ddd7e57f222ee59aa486eab8dd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-965.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3CO0BqFipKNb5VDtbJwPfdHvokHFZRxzhtkBzPP6AWAiEA9ijdV/2k/3tPxalET3dxAnkozabm9WMi9Yw2RB1ZJMw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLDDJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbMRAAlASVO385HF9du1i9gMaNOUmm7fNZdp7FPgEikXWwgzx0R7rI\r\nfRIOgeNJLPRjIms16GmvsYMNhn3ONNBC3AAkO2SI19Fht1WECJwmKgZ1RZWE\r\neWB/McMoLN8qIeC6GOc0vyY3JzkIg4+vt8GRrFDOlXBqPzimKrfSuX3FRhWP\r\niFTQ54pVocccOV+JSkE5E4mkeLMq/sZhpRFxsmOn465kBBt0/6LwFk4BVBiB\r\nKsednXtvqi81q0ISP9vJi3yuEhQNyGCRSYIjufOLfDLP4lZswYv3GG2wE12w\r\niZLFVtEZkTAlyhuW2FgJgC5GcmojUteCAAcuZ96yiIF3A8GT8nNAq5pR2nlV\r\no86hXeICjNRWOYa4bBxyyuPPwWavSVR6C6PkmR2LR0yV59kL1p5Djy6tXuL0\r\nG/4qHM5ZfAUwdOIN3xUft7DQBWq9V37gseE5UZwx9gSYskA7Xjct2H8zsYZQ\r\nWi7KaeglpLj15TsXcYM4kBC7uphXhWKqhtrxJ707SRngYijdM7aC2Spkf4zt\r\nFHhWjKza/plUbA+NychbcCyXlIcYEnj7eM4JPRZ5kCoKppwzckgAHO+h0uoY\r\nvCm9h2QP4XlgV1Zzg76x/ajgYuwPqEWb+UFxNIc9uzytBUAG++m1rRVY+RgM\r\nykC4f3k7LIVzca316ofqixs9P5ZsFVDswmI=\r\n=FAvd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-965.0_1680617672816_0.15212532525637812"},"_hasShrinkwrap":false},"1.0.0-canary-2020-966.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-966.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-966.0+9615f12","@bodiless/components":"1.0.0-canary-2020-966.0+9615f12","@bodiless/core":"1.0.0-canary-2020-966.0+9615f12","@bodiless/fclasses":"1.0.0-canary-2020-966.0+9615f12","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"9615f12da075e67bd28e66f2a50fa4a3213987b7","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-966.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-KDY6R/LOJas/ZzHnvBSCO8XGFdTEL2I+XdnPHDSoANpyO7z9iPFkJNbzujuTG+VUzIWXAoyDN7s8WMKhWISihA==","shasum":"b02d70fe868884722ec9e4c69f8b4f954a0d1510","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-966.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICG2wtwJgYU7zsPR07t072XuaS7Byosp8fgPNDe/KCEVAiAwA3V64FuTgvpJ4QAWdMc3sNRBJLuCrXyAmk5ZdJdDyQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLJSSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkVw/+OoV7Ty9lfs5MjaJ1AlD5ln0/cJew0Vdwu9k7/G6zQy5J4YpJ\r\nKSSw3AGY+pL4vUzO0OGi1ShMQjEQVlwdpxc/dsWHgO7zuP4J4QCqRJQ+leQg\r\nZnv5dZVAVgxY9CkeNxD+uEQsmytYcrl7Pdzp7Wi5ABpK9qbKxeJvfU9NHrgH\r\nLaU6KGgx2geXhPUPCE3lEIz7v7LbPt9R0bcZB6PdHVBv8wG2222HPke50Hei\r\nP4oqIlVscg/Z7C90bqvw9fW2UPI9hLELJjkWTLghOKOsX7fwSckZv/d9/uCD\r\nx28+TG9mNa4HokxmM73rotTLOOSCr5UnG1XVt2W5yf+HS81wEboX9y0gewm/\r\nh07PfRpjL8WQDRRWIIesMkKkctFuPHM57Zy3ByUnLzHYmBgNW+dTNZQ9wj8x\r\nN41oo/ump/rwSMkvAyw6rw+gdIKwJ0tbKgBpE41e9PRxK1A1i4Z9r3uqXvD/\r\nllyqSznIUh0FMRUTyu59Ro8/DIAjpjqjeXBR+gyiKvCVy04DZGgCyQfPjtN6\r\nuQDzXlXb4o+Kx2dc8/akjf6XRWOnCEnVzNxQdntnLsxpPqoHGBtf0tKRsTWP\r\nh0V8XqM5SWcAp6XeJYbqRmpzd5SsnN7Z/+FRN/mTK6kKzMK+jmeG230+zQAH\r\nisiAuiBUIKwEx3ArInFZx+N9hMpOFA4NpnI=\r\n=VClV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-966.0_1680643217890_0.2795940000750734"},"_hasShrinkwrap":false},"1.0.0-canary-2020-968.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-968.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-968.0+2e36b59","@bodiless/components":"1.0.0-canary-2020-968.0+2e36b59","@bodiless/core":"1.0.0-canary-2020-968.0+2e36b59","@bodiless/fclasses":"1.0.0-canary-2020-968.0+2e36b59","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"2e36b59ec95e3662846fbe61cfa50919e2f7507d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-968.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-dzyAF8k4jvZjuj4/wRWX+I0RSIDG7wUBPHf1AYnGaUl0Nj+Ok1fdhaRUrgurfvaBUNCiy9WNyxIAkob/PHIIgA==","shasum":"4cf231a96c3641cfa5841f5b5bb2ef25ecb16d45","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-968.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGK/qqRKym8Y1Zg0Dg09LfElccs2kJ46NLJB/vMsOVnOAiAQZcVimKkisfjnUwWUG2V90dtYQMt8aVcDvn7Ja3bt2w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLU1EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0CA//RuIzz/o6Vfvs2RPtFdHUZW/9ErAN24J7r/XZqXJeyxDO7B5N\r\nwKjJhJusyS3mD04FuYdEZ9D6Qp3uxz7CLyrbT8p5EJaEBR7cc4FVAnx5h2tD\r\nK0XjF/X5dqxY4/B108rKZnppCfHo1ENgOOLBvFyI7cWFRaeZ5A5pfQZYi2TZ\r\n0v/YOZ4V6mtgVn4fnh+iJBwwwwrHJR9VdsPNknBSxcCkgQh9Q5CMCq7IWR6F\r\n4vbybh2ebBEXiy9pTKFzrkdqn1U2AtMEtQfjOAhwoej0IcuDa1gNDhy/jB28\r\nUEgH3sa2HoPWvV3TmxHSMJjHUod3SJyZcmwUvUw/fIKbTnWZ9n+oA+h503eF\r\nGimHGp5i0FE009Nf1DQ+yFkcAlmWOQHFSk+ba4Wp3r1gxGq1SaQsO6Z8gIeP\r\nlDPSbPKJ2MT0GzE32AXeyzTemovAxGBkc9XjGIFjmEp2zenebvkI2oiFZU+3\r\n6jyQNxkZPDvmOGsOdzMwiNPXCJ9NKd8W3Z9O03an9KftW0PMt7GyYi2o8kFn\r\npWRZAC6/chv6An6f7SasUP4qjSRPOgKpAvPCdvBk9XrUzQs26YcchIuk9pYm\r\npsohNINr4X2lSS8xvcI/9M3x+EfqKbMSgQE6MFdiT+RDHXkA6u9L0n+Vk823\r\nis06xcET96cPlwe5AfgPdc0EnBKrHnu2jHs=\r\n=kwd5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-968.0_1680690500345_0.3516269259786713"},"_hasShrinkwrap":false},"1.0.0-canary-2020-969.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-969.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-969.0+5b94880","@bodiless/components":"1.0.0-canary-2020-969.0+5b94880","@bodiless/core":"1.0.0-canary-2020-969.0+5b94880","@bodiless/fclasses":"1.0.0-canary-2020-969.0+5b94880","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"5b94880c1fdd250b5a37a47ab1eada96064192ef","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-969.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-tG+S3DqzKXprkbVW+52XaeNQAoynO/6Z6g4zrCgUv8jDp07/a7S11p0gJOBeT1FpIwar7u+2z9/nyCK1SMdn5g==","shasum":"4c65f7abe09f4ab96e1a59a690b3a85b39f4939c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-969.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeCQHhViDAbR61oCqHyLpKVAgpVPYsiDP8cqmyuFi56gIhALurs4ocqtjpqTomaCL8wmySadQ0hWunKLWOQpe8U9WP"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLXmrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr05hAAgbZVllxuNKyBgXgt/sW1s9Bd0UokAAhpQsxVb8ZntfXAs458\r\nN3R6oan8DS/AUNcEpuwescFCkeMjV9Yl1nymRQEIy7uDlXNtakjN86OhdkW1\r\nNDZEKcK2rdxlRVrjOqWMZ4Il6yE3iEihcb1Q33JZwvkbCTI9C41Cqlxx7IF7\r\nN1684i4ZJYI1y6DfWhAfhL+v5XZD0ei4CSZYKs1UWMcQYMvt/bZCEQKpdPcN\r\ns8FBgoWFwRDZFQZZnZvB9ZPhpXi1CGn9otXJd3047DMkThTndismemG6OUwW\r\nFkPGnfbVsBRCUX7DvG3AG4J7Y0KGgB20k/LHYbqeX9P4fdKj2vARD6YUZ6yI\r\nGWH6ta77YB9UAIBEev4V0uohUXxxlSGb28IjkR/aWHO2Y3KQpcAHl/PUiJnb\r\n+UeZiyIVv2KFIc8tg2pfIAWuFVF1nH171ae9FgkuPJ0/OFFXmYmN4eY/8BUf\r\npBiaBkr1Ung1pnG5ygxC9p6r/aNRMMrhGSyyb2nyDhdfIkHUaOlN8e83BkwC\r\niwrDKhVJW+N2z+redmCZtdc6dCVtsmJ1NhVrM7R0FuHyKB5uN6hK6k2ae++m\r\nLNLpx1QPSZIO3sRo0/0cS9FZTgo31Z1zVRyEM9kc0ZDpufFdge5kYQP6uUTp\r\nsSEjrc7WTXvLfpiBd/mHE3NpNiHdHNH0bqw=\r\n=uaKw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-969.0_1680701866370_0.481356626966565"},"_hasShrinkwrap":false},"1.0.0-canary-2020-971.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-971.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-971.0+5b8b97c","@bodiless/components":"1.0.0-canary-2020-971.0+5b8b97c","@bodiless/core":"1.0.0-canary-2020-971.0+5b8b97c","@bodiless/fclasses":"1.0.0-canary-2020-971.0+5b8b97c","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"5b8b97c0560fb6f6c1716812fb0c21bcef6a6a08","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-971.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-CDOnIhclahhUjQ2LFas2Qm56fgoiFK0MVjZrPPIScFTPypGt7rX0CIuk5WFftMo6UMTUijNJ+m3akD7GnqpUig==","shasum":"36fd7580556065f8b127fcbede9d1ccd9e9c7e68","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-971.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWuN2xsJpvsowyGNpUPRhAqAwFlODhSEYeoHmC+n2j8AiEA3HXlNgRCgP+1kvmUNURoHCZck9QFEW+6U+dgdXHv2w4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLa1xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBwg//Z5i3CqiAJftmVdAfrMcGppZGZhnyqKZcuncZ6JUx8Jl3xRBR\r\nJMAzw3Ni0wlEPqBwAwx8tr3vqwpne4i1mxTJg8afb0FvhcyoPNgztD+iPqTi\r\nprfxtM/JWkTUtFUAg5DCUPgHp06tD0W/Zxy05Bfnj/1JASoecNXPWyEWnkQX\r\noIJQCnxyRThXXkVwvaaEV5WLvcH9VuFotEy+6ENh6majBbx3lNSzGaq0r/sr\r\nwxar3o1xZJGM7K68IVhvVP3KJTXkREV0MtKVD7rdvqjdy02rPx6Bi/XV8g88\r\n3lNFVYoyw7AWupoL6xHfqKIBvIA84lnfATToJYAbecQhYmWNUsdZw9Zr/oRs\r\nVXN93/xO7Rf27BXG4UDQ5o52qJQlsvvfDDy5lP9AyOZHamdOCSDeeIoQlbuY\r\n3dgSo4uAz0qniDNPsnR8hEZiu87CeDugd86mJAiphZuTua15hQchM3CtcUfS\r\nkGmn1ZFffiRTuwnWfkGRnC764nL/e5RuIMrpfkAheuW0vKbUYVPq1ZqoSFsf\r\nGAy6oxz+rCFebHK3Je2SworORXiXrET5IDlmN1byi+oohr9nUC8nZUk1ip0a\r\nWpKRmiXMnwFztCqN0QNZpcxBdki/Q2rM6LpfNrrkF3sg76tasXcmBQ1cWgm6\r\nbR+DbgUoicLjoIk6uMJnE011ff1QyQ2HsUU=\r\n=Bmro\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-971.0_1680715120770_0.3130289053661801"},"_hasShrinkwrap":false},"1.0.0-rc.30":{"name":"@bodiless/youtube","version":"1.0.0-rc.30","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.30","@bodiless/components":"^1.0.0-rc.30","@bodiless/core":"^1.0.0-rc.30","@bodiless/fclasses":"^1.0.0-rc.30","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"e09a60bbb5f2f3b5b16db4a2fe5e9d58af2faf13","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.30","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-CF5Ju47WmEBzqzubuhu21l0L1Z64KTWHqJdpSpTAM6vCkME5vDdTtVz5wNQw6HYi85yvD1NfHGwQXFq+3rt7+g==","shasum":"df3a9b8a177d128a6ca75bcbe747c5744787bd37","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.30.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu8WfFcLjSN7zTyoUSJ/9kw5TWDiMD2FfpnFMURRFwlQIgCkrd67wN2ekqXPAYEc35QcRejVcxSqUKr7lqS8hjmh4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLqqHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHIA//VwV40twciNZU9VrXF27LoqlSwl2dM4dGBjC+j5q4DaDIQqbN\r\nrw2/cQv5BnYNzjGf0n2M8gBW2wGtFJ3b+ihKdO9SeejkKb7q/E1RpSd0huxX\r\n6tv0kAAId+RwbE2pu4dmpYtECp9yPxWn6EG6bKS4Sfxx8UXRlG6oKBw+Jmhl\r\nHv8Lc6x9L5YvkjZo/3XEmefnNkRBXxykNObj34Uwgk1W1En2RHq/Dr/Px5xi\r\nieM19aiP1Jq4nYyuwchh4djhUc3j4KmDEYp/tUDuc5ZKCOdxg2Rh0HK31q7V\r\nQPGPI0vqgSd2B7KOdL2d9IkwryaORi0SV7D1JgmP0ErCEYv9kRQ+286VuS9h\r\nXhGu3KE6c4ZRG7PCbKKkbGZrIcj0rq9M81l4UemC1EtuEIfhBQiHln22NY1F\r\n1dAR4DHzj7YcgP26EJ8LeVkcm2vT7EH0q2vMjrmKS71zr7ktkNWi6Wk39TC7\r\nWN8xO8Y25nb1qpZecwg0QZxFoD7mFlbJePPNBgc71X+e1jk7V1NlP3lfBngp\r\nbjXFO673Gec2IssYuXGmPGucZtuUWO5+T5ce4mZtxd/gypTHVsdzXKA2SVGW\r\nmb07M7zoOQjpNGI5Nx4B9k3tpSVA45N7UbVipXD8MqYCECaLP6nZ8AvWjN39\r\n6YZuCRAK7AkUEuVJ5vFL4DmIRx+xrZBtbGg=\r\n=dSDZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.30_1680779910826_0.3379185287958715"},"_hasShrinkwrap":false},"1.0.0-canary-2020-984.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-984.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-984.0+7590378","@bodiless/components":"1.0.0-canary-2020-984.0+7590378","@bodiless/core":"1.0.0-canary-2020-984.0+7590378","@bodiless/fclasses":"1.0.0-canary-2020-984.0+7590378","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"75903782bc854734a3c4274f1989b2b07ecfaa07","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-984.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-po+Cftwz41u9fEZyBg3Rvdbohj+NipJeCbU1aoyXgC2cdWT8/CmJj54iIhR/fgd3xY0vSRV/AAHluGluO4PNpA==","shasum":"f717a6ae3ae8ce8ef5ea4e9042a590353c127eef","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-984.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMxGTtDMhpweCUVB5aFrKilDsMtdcMnvolG//m3KFIWQIgS37ll1lpd1dyWDr2EKQknTKEzdFF4dkR1lMFJfdpMfw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLq3tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLvw//dAL6slQ43pcCnQcbv6I6ld2Rm912o5olkvtR+gVziyTTyYM+\r\nVL1SnMdxiEtjSyKhrkHtv6czszHmOV/2p7GKHFNSITdvvY4MUVHPVktdgMc4\r\neuzUaY1POf0+NXsREQz4xQOw1Z05igynV+RwsfPZqpM1PmattWyTfUqnkZje\r\nWKSTsTfFAVabG7OkaVifUokRCxMWWRw7zxIWQZ1XeOgnAjqR90JDtwofJ0TI\r\ncvcEAjmRg56tzLzQQfX6AcF9V0RdNu/8sV/lp7Ypl3IWkmEQkgl6I+1cAcaN\r\nAXS3qEpdIF5AhnyHDHytu9KoHMuFp8Uu9Rz16QzT5aIhVgrqpHWbyc/2x57H\r\nVHca/dPE7N1ypW9M8NRFuf2Ir5f8kSzveqCQaXOJKxCaU3NLhN2b6kWo90wN\r\nE+8GKHPL5v4+BV0MtA5pMRRrvnNKGz+njcdRVIevh44l4VCNuje1+UDqaNJZ\r\nmO8C9hfcRGudUZD3zbUp9KUQatgC/JbJWtVvrFYu1f0r/O28DPAPVh9e68PG\r\n8AofceafZZdQ3hgKv2bqFmuLlk6v87w/OSOr6mnEsl6VVhF4tf4viKGft8H/\r\nLbJ2w7IQvys5rZVr8DwbjndTQ+4fXFdda6fQkhYYlpoOjcY6glCcyXCRVIXS\r\nUgHKaG5WTOyKWAmnhUmhT51JuBHxLCqG9ek=\r\n=mP5g\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-984.0_1680780781522_0.9704605439966645"},"_hasShrinkwrap":false},"1.0.0-canary-2020-986.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-986.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-986.0+cfac462","@bodiless/components":"1.0.0-canary-2020-986.0+cfac462","@bodiless/core":"1.0.0-canary-2020-986.0+cfac462","@bodiless/fclasses":"1.0.0-canary-2020-986.0+cfac462","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cfac4629b15376938606f1463a6e05b2f8bc642e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-986.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-vrxGjaJlY5/6RuFLr1Db0NqKygpJI7E/kGsP2eDqXNcqL751wpzDI+gXdsoCVZlLGK9AVhGhLD/tHm/TvxFLbA==","shasum":"b2dec8878db54fabb13b7dff97751696548d95c6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-986.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGT3syoOXb5+NZ7N0vshnTZT+tPhgu7hKYE9UrsqCXDLAiEArpkK4BseMFuBlwVfV+BYA9h4PyuSSN+ZXVMC6lfHQZc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLrCgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrjQ/8DmyoJA29f/R3qdarEvs1hIWhcOj0Iu+j53MVQvJKkWjKvExY\r\nX7gytpwuas+zCOSuc2SYJyD+Z+y4nMJ7y4DbZeVBTX2bGbROUwPB8/wm4/Gz\r\n/b91JBuDl3mQGkJ0nd2h7L03Shu/+tpYn9/v5cN5au2FpJ8T/HQh4UkaZbYz\r\n3jz3G0C+aIUNLHOtLTRjzaZzY+MJMjXpwGw3fhm+kU3JhYZTNGi/A5Xt+5Qd\r\nChLtct/0RzCGbfa9iLvqOrrp23MHckBr2fBzK5vK/zZz2zwdoXricvh3QC1q\r\nfVHenrkKMAihEiaOwgC3R9vvbsAoTBVdAVWpAvu2xAOo8/uSjQRq5omf1Dpz\r\nWpogFaQ9VycrSwfcuO8K+jT1+zZmZrTw0CgBr24kFJW6mI7BkdAf9as1xW8C\r\n057gSctIR6rGOtsNmwFnD3slsztWe+1YVm6qWs8U8BOcwRSYJmX5N9qoGd2G\r\nkeE2ri1bQkjNJ5ijihKwtwqWdcGI7SZ5FldYFwY9zvPYH6dGc7gMzp7DF414\r\nEcPtZ903EMn1dOlldQ3rfUoOtsiErt/NCbhWdcrk2HwFpgmwGCuNyroEaz5Y\r\nGYSmsBu49kkj819U1K+S2dpla0fteaskszkPmsIgE55w1yyCyGyjwQys7J/z\r\nkd386OEaq9xn5dTy4oVAhY0IJeG5Kf0zkps=\r\n=EBLS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-986.0_1680781472580_0.023193333907801206"},"_hasShrinkwrap":false},"1.0.0-canary-2020-989.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-989.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-989.0+44f1557","@bodiless/components":"1.0.0-canary-2020-989.0+44f1557","@bodiless/core":"1.0.0-canary-2020-989.0+44f1557","@bodiless/fclasses":"1.0.0-canary-2020-989.0+44f1557","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"44f155708fefbdf8592dc38d3108049445cc089b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-989.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-dmsDxLOmnqtiTsTZ1VgC+gk+qUL7aMAdsXS8Vu927KZko07fLyVWmdn+NwcpaDuHc+vYmMIxeuGnbikiJX5siw==","shasum":"8d57c3ee74e9ef402fafa498a2b6569cb2c8719c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-989.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVYeWatsmBUarrkjYJaCdE+KmEfeAfwE2AV9CHPB4wsAIhAKbnKSgc0DGH9WsUnkVnZTbwIa4x5RBMTOnEQYZoHLNu"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLsFsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZPQ//b2JVTwaevArJILFeV4z+6M55JRYXS4EXCFxR3Ulhx0owTu7A\r\ni588gK9MYmNmf/DCwxAAbkqOXgyCApmOxETLVoHpBei8TlvF3rscr4I9fnBI\r\n40Je0bHwNBUOt+hdRnwWPsCPWwPG0bokXw2WwIbzlallTojeYUIp6TNqyc66\r\nyaVNkEuMuHqHG2SH3fmVHLBoTRcJsEmvyHnv3xkZVN2XlLLMmA2JcRkhh3Qq\r\nvKqfnL89FaAb5pOqaFD7ABKbjvClr+yh8YV0p88/wa9rLwLqjUEzeiFL430/\r\n++lZeLMSJH/y+h7XrqtWlfPLvJR33XUqPfj+5QEJUbV2z7Ul08w1/nAzaa+U\r\nZFlK5VhSt3q2kaQmB/zhQSljKeEu7Q4Ekf5XPJ+685h9QBkG4T/s+ZK5BhXx\r\n29qN16pfllpoC5wljThlU/ksIXdyt8c4wdGTa7qfrg9uh4SLcJdtYFNUMijc\r\nAkQLuwJqJvbt3RZL2oebBOQPsjh/B0yltbhw6Kf/BM8KsNvTZyhd/XwDqWof\r\n+BRFI8EXryXtD6lfih6TgafoVRvXn3uGQi/+sBQGUJSAhyHJ644UUG2/uTUy\r\nQuAlfigyAVmPBeeenuVq4yXC3t+q99GFxxTRB8J7NtujvQMSbIYcTfNiak4e\r\nNUGC1NiwHWPifbDs2AJNMyxgBk5PE++Dma4=\r\n=HEgL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-989.0_1680785772377_0.406603653419531"},"_hasShrinkwrap":false},"1.0.0-rc.31":{"name":"@bodiless/youtube","version":"1.0.0-rc.31","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.31","@bodiless/components":"^1.0.0-rc.31","@bodiless/core":"^1.0.0-rc.31","@bodiless/fclasses":"^1.0.0-rc.31","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"fbd3a5dd0a9733fc2c383d1587f4e4f2f7746fa4","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.31","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-N0bheOF3TiDI2m2ILpBneLL8+ILviuuAa8poAteJ7hR3VEH6enKBN3HC6lsWH40/qFiGwBTdzxQMo0dCI/Cs0g==","shasum":"e347a1bdd2a58b1163c050c3efb96b665881b136","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.31.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHiah06Qtc4+OmVMX6MWTmcm/l+9gpju3kVk/vWsT1PLAiEA/6gDBrlBsBkQ2OEGG7vlZmu1ByGip/UD3NPDENxXIFg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLsKsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlSBAAkiM8bPpfR8iWHNYdHyzgHGXeqILresk/N4Z7lJGYgZbxYh96\r\niIJUSm5UqPq4r+1o9Y4rL5wkVLpdmyOG73GZ2AH4OlzaJtGsvabYSLlNbFKK\r\n2va3HgxbFD6Buh9iGavP9UvXpYxSetTWjULd1TBSmT/ipKVhKjc8dGYzottt\r\nPMtBVTXWV9qlLdTwNnSJs3Tni1axAp+u3VBt9qXgwc6uku9MS0BR3369/Lxk\r\nTlTvegRKGlrQ2KJyoAxLtW2LMhRzbklwAb6J58NzWLbg6LQZbMuEs6cbS1Zi\r\nVepM1FtGdMaCG6RwF86eZHoQBsW54tC/Dsk3yb/NCXotfmQyG29fuVvDQNNV\r\npyYVKIBl/2BvkI05XJyxx45w1FLFKw9CR8DQ9VJgJL3elv2g1Hzbx6SFrIi8\r\na6tRskU4ybl2j8tUtX6kIp/HPWhOdGPGrwkdYgo8NjCw8M8f+KtYZV/pzv3W\r\nj+NnnhOXF6cTZAL2OuezP0884qIBiiPS1WcH5Yrx3+CG7DocP+NJdCSilfmx\r\n+rZz3PTT3lLyNK3LFzx5aj9NMRVV3XO5542y9AHiZwjd943sjs26FRwVEq1v\r\n5idoL4h5igc1YAxQtJcxpajUMONAOIYYyDulWTdBEABq2fqIRK68cwf8BCTi\r\nCv0zi8HwI3qZAXdZwp4gYMtJAux6DYUHXWs=\r\n=4jKA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.31_1680786092113_0.6184480669598995"},"_hasShrinkwrap":false},"1.0.0-canary-2020-991.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-991.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-991.0+25745d4","@bodiless/components":"1.0.0-canary-2020-991.0+25745d4","@bodiless/core":"1.0.0-canary-2020-991.0+25745d4","@bodiless/fclasses":"1.0.0-canary-2020-991.0+25745d4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"25745d43817aaed5b882d0a297e88b68b3241b0f","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-991.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-vka4JgupW2AfoSkAQVqRpKV/eWsQIpm9G2EGa9AE55wvKzQ3hMvinxi9YRQVAuej8bRBS2ldJdliK5c1/eCX9g==","shasum":"06c0acd80fd6522f8f2c08c37627717c9da88e5c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-991.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJ0kJKIKpzBtDyetqZXIlOR3l5csEKFMqYtJgbn8pdGAIgJ7wGp4KnMmekNYpbP8yon+AUGvWxxrB0QXvXx61MJaQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLsUyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTrg//ZnxQpE2hjbZn4AdgvDagmBIr6+NmOGSqC2W96HahCgTqGMfv\r\nnaRsM7+3no3dj5uD2RFn4j5JEDRvTJWmOaM+5WR3AbBRIRyM3aKQJ6caWcad\r\nyGTm45j/AslOpSG+bQ2Fh4uxYLYAnX7U6Wv4MuQhMif72nRp8nMYmxfN51aw\r\nhr5HzL8EaK8pzwatnZMNA2usT3gFEaW2tge7wjK0l9XRqOqldCcXM+1YBopo\r\n8Ef+dtPI+NYbl2xT6KbsQKZsFtXc+slwjI/XxvDK4BZSgXsGU8wn4XNiTYwu\r\n4Rtcy1TbkwbaF3fWaxP5fgb3D/YL7+EP360lOFH9KzftDkUdOECmAXqQsfik\r\necTMBwsfELBf0xM+SdKbnaASLWokmbjZCXptgV69xwLnxKlJ+cTZdoCaIQzh\r\nE7FQ/MbrRS0Q6zFN35DeM5w+0t02yg1OJ5qwqM8PnDHdn0+9MJ2+V/0BTUPj\r\nKNTfCFh0yR6suNMii6yoFfKRrVP/bVHY1YbFPXiZcyeG0Q8YzHFGKJB8Q3k3\r\nS0TfRb/7VCOj1OUTFzCkNG66bk2kBwqN37XdcZWp7qcw5pbhbcd4FtECXYHO\r\nZK+VXUlCn0/vMFQKp3x2yvY2/OdQ2hIuZCgmyMnlTmWWC5KZY21i+bxBDbUi\r\nXekRoJOcJSgT9DmEZEfIjKC3lIWFyUnz3x0=\r\n=zfUL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-991.0_1680786738059_0.6613252990661671"},"_hasShrinkwrap":false},"1.0.0-rc.32":{"name":"@bodiless/youtube","version":"1.0.0-rc.32","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.32","@bodiless/components":"^1.0.0-rc.32","@bodiless/core":"^1.0.0-rc.32","@bodiless/fclasses":"^1.0.0-rc.32","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"07debbb2559fcd0155fc7ffe1bbeddbb8d31b211","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.32","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-HGH1u4ieI0YSlCSSDwGvviSqVOv18bS2OHcAmsoh0YytkHX2ErZyOPihv8Lnxa1TaJ1QQSpMXbTLN8jRfu22xQ==","shasum":"00cb8467b9dbdf97c6ce1f908f0b9ebab5a13fee","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.32.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjM/cbZA2xigY6HlRZHJGn8fY5+Uvc5qD/ORB5XHlYFAiEA5lNot6/sQ5Luo1VDvcdIwT6j5BwRbcfzlFZKk6BgUaY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLuNAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbkhAAn8qUJ7hYsJ7hy4EobD1xmeauNLttcFa+xARjUQO5F4j+vqvt\r\ngB6eaJGznXyBACi/JElpTFH+8+9RxLkGw+Af0SlcJDRTn9Uk30cXVa0OY8Cz\r\n+8XwjYrCQXr/lw1mrDBR1OYFuTvY3XzlpiJljxzQm1cCB3T0LjB+29aucqi7\r\nm+f5ZnYNZJasVGg+9b1Ll4c+FoLJa4vY/mKbFQk0BG8pORCSL7BP801NgaGG\r\njIx3pXkFkyb2FC2HAtViiHOGEhac8dTIM2D+294oep4oitHiqo6UyX9wdMr6\r\n4dMB5Q9DKdEUegdJOjqw5E2INITxkvQrAV9wLliSF9Iphtj7FJF2ZYUYMn2g\r\nghOeodb9xSjmwOZjFpbss91/xhPNIuh8Za+O4Ux2oWU6eqnbV7Khs4BNAI0S\r\nF1Zeq+2ilSMvbjRJfADz4yxjtczPCqsgSjNklKdYmhiyz+ER6aj8U/06IJSd\r\nFYsqiOAfxzlrgkGMl5gqvNSLEF7Hlej5NqaTbBOZQc+k+5B5NOZ7JBCq/q00\r\nGDp7b6o7ShrWG2OGGwzrY1hoEh8xZlukywxlReh+KKQ+OlWVIuszpXJb6XLN\r\nCi/09shmE0lfWsptXDdrdvRD4uUNNR9J0SekOU3z+fgnUxA/loFHa21P6yxb\r\nAaQFglqqX4GrS71GYN5qh+nxEUy10MpBb+A=\r\n=nMaa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.32_1680794432649_0.8303032309258249"},"_hasShrinkwrap":false},"1.0.0-canary-2020-993.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2020-993.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2020-993.0+cb1537b","@bodiless/components":"1.0.0-canary-2020-993.0+cb1537b","@bodiless/core":"1.0.0-canary-2020-993.0+cb1537b","@bodiless/fclasses":"1.0.0-canary-2020-993.0+cb1537b","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cb1537b7051caa65101a2720cf01fd7b0a068311","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2020-993.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-gBBnZh7Wonv/Zn+Lj1JiLvOnNQK1hv8BalbvkNxoVkVu7eI8I5zGVyKO42tf5CEpvouyYTyiEtRwRbOZ4TnUdQ==","shasum":"3770de83740e4d3da97af1050f8743bbc0f4f373","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2020-993.0.tgz","fileCount":19,"unpackedSize":217251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB3I9O5gtqs1Yh1Z01+FM9fxhKLRaF9roPsWX20Zt/GgIhAJj92iJJVpJYvmer3pk7BESZt34Yd1cEBIKfS6fEOaJ9"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLua0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpxlg/+JUn16SBslGAa3/rH5dEncEUHcbmYyz48wExfay9B6bapc4uQ\r\nKUXd81WBmKsk5QTeMHQrgVK/g14vizuK9VDbEBKno26PvTvXjpQpkvC7tgqj\r\nMUKvrVFwM24wEwqjmQKPd3LaAECKd/jpJgYrSdg5FeYegSiJtMp7IwAJ0g8e\r\np81FdEh3lx5N/rmoAAg+E0fXu5l1QBkdrcpQ7DBsCI9UzjVhyrUoQ4RfJNJK\r\nI6C++ZwzKgl2FSuLWACce1dKo7ajcrB6W3nw2TbOHb+8SGXx1ZL3nZb3VnL5\r\n4GacSRRze37AmTZbEs0LGanMLUb8ZsJG35BCO6fW5PhPH3tLsNqvVD3t2avW\r\njUkB4HrfMIbBSGdIdPoWXu3e9jvD8IrwDEWb0fqYV1UC3XAUABykPkBrXSJ6\r\n7wRTTYRpo/+SFlnIdSr8k7CxdWUb5ukwyt0kvfNfZ4vekL2/QcnDXB6Apywn\r\nuUvJiLAvATIINOJs+rG842dvGZe2FGbb+YWpyeq1y0L9enwTMKIqkXXPhAbj\r\n9E49FR5bdvyNdTDLlTt07965OCQJQIgqL/mwaNndhaMhgV3Zy1FqJ/sgeEDY\r\nue/CpKCSgpgca30F2JyMGpLr8+JM1ddkuw6ZpxBMUvGUnt5XzwKCtueiyFkA\r\nbG9BJUuo2+DZZTulWU6gkB9ZYLhLABRx7y0=\r\n=Er8a\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2020-993.0_1680795316329_0.38043785723534573"},"_hasShrinkwrap":false},"1.0.0-rc.33":{"name":"@bodiless/youtube","version":"1.0.0-rc.33","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.33","@bodiless/components":"^1.0.0-rc.33","@bodiless/core":"^1.0.0-rc.33","@bodiless/fclasses":"^1.0.0-rc.33","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"de9e476ff23ca72142fb4b0fa921c39f297b72f9","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.33","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Jy/val41oQgsVGWEELnWURs64IJz9xc0XFezzlmYjqn/m0uR1xYAlxk7wT4C2edmBVAq5xnM8PLSgxqqvv1XoA==","shasum":"f8c699f7030453b5b4d58bd01a18e56faba92438","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.33.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7wsq/PvZn7/+zghy0Sy/Vlxsu5QPeH19imlMbevwW7wIgVZtAANjYGM1kpz5o7Oz5YpfjAOR+3EqOI4/u1gVYj6w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLvRGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtBw//Qt8BieRboYGbp+CtsKynD2iDGP04bmdc/Xtl2Bb7MQVMbGxD\r\n/eHISTTzEcTVPafZOMNwa9++tkw+bNucZ7z4RmAL+Ycr95Kt0gT5uN9i1lQ5\r\nOdxLc4OhkxctIBu72XSi3Saei8uf0z8IJ2ZKsSnWwzAWCtFtzqkS2G42wGMr\r\nIDaYBtb/QhwkCleVxONYmfHc+cKeN/Op02kCepMfFKItHxEKf1aug5WDLPbI\r\nbXXDgQKHaNjN7eO95wZlCu/vSTfj6++6bu4b9AdUroySk4CF/3vMiaf+gE6a\r\n4V+TcJ4GLys2SkdonBwaYGLSvC3rsAhNTPL0z6RrIA1uoxD78qLg/7EfIpi4\r\ngXD6Gxd8aKDdpmlA6w4w6Pt/laWqtXC3ODRLS0PXiv5VEhfeE618mj1ahEiS\r\nxvlcQc3NV/J8/6ZKSPlxai20UArEoildrWWFheb7gTCkd+cGwwocDg6SZCF2\r\nscB7/D5pg2dYdx2wT9uQU71JB60BR4D5mrHtVeTvHm8FX5r+MM+7v5cGVIuy\r\nYMmMJ81xN1GKIG+TrBXJY6nHeJRhYr8D4oqzFe7YfTHmMJRpd6+pKDy4KPkS\r\nMJiAbWCMpWx+MYTEE3mRvpFzFqBJc+GoJtUMCTFDaYsRadvukgMMXKFCkTRD\r\nLnaHzMYWxMFjcJaT1e1KKTi3UkUqBETh1uE=\r\n=A2h7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.33_1680798790046_0.8982053591667136"},"_hasShrinkwrap":false},"1.0.0-canary-1991-1003.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1991-1003.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1991-1003.0+84cabb7","@bodiless/components":"1.0.0-canary-1991-1003.0+84cabb7","@bodiless/core":"1.0.0-canary-1991-1003.0+84cabb7","@bodiless/fclasses":"1.0.0-canary-1991-1003.0+84cabb7","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"84cabb7ae674c1f238962b550e9fbc72ff71e40d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1991-1003.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-4r/c3JeQEK6o8VXVoq1+V0Hdgsb0IvgxwmodY38cgmD0udh2f1IzgiE8NiG4TIrZNmVpBnc17NkKaS7iDxTEcA==","shasum":"b96ec5e06432ebf6a29381556aa9980a4d72f301","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1991-1003.0.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGRdGn3/EiVcoyk1MZwSd+ewusWqDGBLxVEC5CZXcv4AiAB9e/SLLbVlmKZAyMmf+bSjvhH93537DVQn8WjvDdotA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNYzdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7Dg/+L5O3nf82dGA02utclVQd5Po02REdRZYRF8XXCuSYsLs7GhiM\r\nq62Cof1vf9Aqpm0fytC0NWixIwc3c/cVYvDDcOEzu0IwuHrYSjJgopd+wxQb\r\nL4/Qa8cYZlQspmoKBfXB8XXfT05EyHmXSQXsQmEhAzObRSHssffflCUF3zyl\r\ncpm2Pnz8b0nyi4c1ZjutU2MCBb/8+2gnuPQbJL2yoJyervpw3uJlBtQGfC3U\r\nyRfvjsqaqvqghUCxB4xwTJc2Vgc2P5npes76SVK0HoXUwGtsBiltnTq/ZFb4\r\n/4AUWEi3FMQa3lBwtGOAvKyKIV4srcUg22QKnX5Dx4DFp+ymhnu+NsBlVG9q\r\nxFyUL8vTpJXNtwTr1TevLEG2ob/tdQRvhmQDg8Xv5V8pdtN0UipsLtZzW1Fu\r\nGUZWU6G/8MxLMs5fjRu2J2ZxuYpmDFJVjWoSajWz0vK33/uJGp1zRvS2n+e6\r\np+lH3D1YOEnjxNBkUo4jasdHh96kqwIZqXn4zu2UVlx+0Iz6B7BQiQsJypx9\r\ndGu2/208QnkGAalhT+l20PhsTvbYvre9H7ho6x/xZpzGsHy8q72PrIw/W7Pi\r\nliM4fN1ZZAK+zSAFG7m/aBGFhGVYvHEtLMS6TYutgFeFUX7Zyyyf3bejNN/U\r\nP8HvuqIJniEFiWr0qI1RiJbTbp8JeP3B62I=\r\n=riuJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1991-1003.0_1681231069563_0.2466290369385462"},"_hasShrinkwrap":false},"1.0.0-rc.34":{"name":"@bodiless/youtube","version":"1.0.0-rc.34","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.34","@bodiless/components":"^1.0.0-rc.34","@bodiless/core":"^1.0.0-rc.34","@bodiless/fclasses":"^1.0.0-rc.34","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"cf38f919f84fcd287fe322480cf3ac02c4735865","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.34","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Ldgawrn/fgV9iM02QvzU4Zt+OtNDCBBnIEYkuEGfhpciSYB3miNw/Jul3DY3ORFQkCNPiYRXmcGOCHtK3t4HUQ==","shasum":"26b297cffbae443f8f0dc425feb3e3f1dbefd185","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.34.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTe7VY6CskWFNkIei+pbMRxer0em0hiJ9tP7rGQBSM8AIhAOtpKYwM/+zmmVM5swcfrXOz5I4ONBkPOKvyTLFs9p2L"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkN9kxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQtw//QNRdG7UaxuMrFQ6+FwglEjDNruo2R1qBY9p4weO/Ps5OSSI/\r\naRPE2Fvke91kWTEgbkdwjEp+a40mR9wu5plrm4xNIzHerMBirRMIHx+PweJK\r\nfJdRHEKQB2S73rTYaDLUJn73SVtFbtBavPBXcIKO4nKkS3sjirFMt1bZ5ms4\r\nTvBarDBdXjeFQVbPJCirmGp4qzjW5brPZM2iQPY+c5KOBRRPpztk7ma6yAuL\r\nMi3E4uma1DTOd4U3N1UzsNW6Fzmg3dCfmC7MXhmUgqtNJhY2RfV2iejshaj9\r\n62tpEucrtPMLQLljTwaIzKlCu2iUZj2etunAVCC8DYLxCr5AxZmTQ9pScmC2\r\nDaCU8FBV61ZHR1l9YA61ughCjtyRz8KMIgCzWHlD/DWSCz5J0fSwkFrvz0FR\r\n8RVWz/jOo0IYNXMX9OFTDex/D4DGf16XR+QvWgGbsy5YH0jBx+t9vHCoJAdd\r\nsmT3sURzspxVLgHHtiPebLv10waHAYr9xRmJOpcWApraQBhr2c5TEhllrS1j\r\n6chtkpU/yLDQuM1QLQAVe5iiz9F6hdvH8gVmnFH70lQghHNNUFZCS0q45x64\r\niNRF7u7NfUPMgoMvZgQIYWMbcrfHPr+HWO2XHRCCuobZP2L8ybZfuW/jCNuF\r\nG5SMWWGoGcNy4e6UzGaE9J6F+BLpJKU4Xwc=\r\n=k9LQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.34_1681381680750_0.7960342610889195"},"_hasShrinkwrap":false},"1.0.0-canary-1991-1016.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1991-1016.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1991-1016.0+97699dc","@bodiless/components":"1.0.0-canary-1991-1016.0+97699dc","@bodiless/core":"1.0.0-canary-1991-1016.0+97699dc","@bodiless/fclasses":"1.0.0-canary-1991-1016.0+97699dc","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"97699dc41c777f12f1ca0d06507167a732a32b42","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1991-1016.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-VUxhaSbTdG8xuWk3Tet17YWji0Y7nTGWAeB6wkKgr5Svem6zXAYM41/ZwH16ILp1vPBGdqtIS7nwqIvHX5pDrw==","shasum":"9f3d040498927985471ea14aeef8fe1f4aa13870","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1991-1016.0.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrcdeWDph+4j96YlDnXuhR0Vn6LC4IAw9U9e7I8hIogQIhAN+uUqeWykCSQ51W22p+sY0G/PFroMN4DwueTPwXd6oX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkN+fEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqovQ//WLX3L8T/TE42ssdUVsLt7J/whmGBLVe8qtpFlJRQH/l/Nctj\r\nVMm09R/9hxebJ+Q8uk53zbx6a+MQUpZux3C4TCq8716DqrHEyuFfKUMk5kU6\r\n7aa/7wmkDgI30b11uMWq4zswYod6dn34yzJGhwp7ley7TG4Ih+tO37LacMEn\r\n6LmKupw9tXxx9FqzDMb/i48swFJvKD+zZXCloIvhaJsL0TIPbBVpnlvMOjH5\r\nnsovfdJkpg+ocuAdc368TNHGlAe/LDZvIXZloFRWlLMRzkiUWK6kisNSY4UJ\r\n5oev8yUGrSW+oMcGmHDBXTMBOHlrh74K3jXCgWSWMB/eyKsPJ92Yne0tfRIs\r\nCZx1PHhQqPHIGKNfMafAIN5AfXIM6DJ0XOSWhN1JgbSBalZNgz5pNrGUW/L5\r\n/8ptcMC0t9KAKKPigxPSYXHGao+yasB3D74lq4ivqj57ra6AzcKCDqr/YbH7\r\nbSvE9KH5LklV/egUEv3qxKHfRoHEIneIT0QX9HO5sdsX9mz0gETe/pLJ3+aw\r\nmj1Px2vMU9S9Rdja9fQTHVyaMvbmJ+odqEk3vx4axRxSFgbpczFo8Xti37ne\r\nxRIqxd8x2CmliQ/zTmNPdvAPrP2AKd/8J+h0dDt/n30zcrXSDDNCXo6ixSmi\r\nBo/6Jt8A3tiMYhuSzP+N6mtBHWxCCQj8mJI=\r\n=S4+s\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1991-1016.0_1681385411890_0.5164918013209263"},"_hasShrinkwrap":false},"1.0.0-canary-1991-1018.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-1991-1018.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-1991-1018.0+a077db2","@bodiless/components":"1.0.0-canary-1991-1018.0+a077db2","@bodiless/core":"1.0.0-canary-1991-1018.0+a077db2","@bodiless/fclasses":"1.0.0-canary-1991-1018.0+a077db2","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"a077db286d07a0d4e830a4ebec3c095caf92aaae","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-1991-1018.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-pSgzsmFyBKFwZjM0BAVTp2SBzEQ8YcOKPa+1CdTvaUR+Zy0R/lOv0v2qwS/QG/Mp/eXsRk4Poo9k/QXff7+/AQ==","shasum":"1a6f61bdde83e015d7f45c0830fe50d0488fc2ea","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-1991-1018.0.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN5T2LrMVGIlzihX4VU05sDl4pG+lNscNzK2PwC0z0OAIhANncrz98YDE3J/hN4i1MZybE15IQIShZezxgYN4WzrJk"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOCcIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjEA/+I+vaz4gbxuLmgan/4lRAyaXpap/c0VyOV7L893Xu435AP7T9\r\ngvOlVwtoP+kJ0wRfmo+BOgsqZucowpYn+AF6JVED/UuQPJBfscBBkKTUftfu\r\n+Gi37D8/Tbc75TrmTAdKSoAINK8kBDPdgPGXWdGYxF5L8eRM8L9VL6qBBLMN\r\nJ07vWJ2LqpZdpDHGu9NDG9dh/uKnBVHZMxt45WXIY4ikR5Ck8ZWCTunmLjYQ\r\nTXGz6ULBrOJwTNRJyKIWwRqJ6JX2sAvkpKN9luPdaYnyzAJttSNkPWUcVlga\r\npXl2t/kXjc6IFawMU4Xt1EEvYP+WQgcSxG0Q5XlTbTQkXom9MYcZdP4C7TcT\r\n5NPFQ5VGxqGSDHGFICmvQ5RmhaLu8aw73AHEKOIqaw0/2HfbfV1UbwlsvQ1u\r\nF2zaV3m5PHegXQo0Ut7ZooX0qS6Bw4HrLw8qK0B/6CbrjwMiOZFi0+uld3rG\r\nnS7uQEOtElLzv5y5b7AHsYNazQovLpfBQiK5VooEgBDRPZ10wjYlWHR8wO9Z\r\nVublReMx7b5rMQUmeSNKa8pzCfrjXwE43mlgi/M7h6BVvINEligO0o9av1sG\r\n67L2Sg/97KGEidNaReG21a4ZK+UcP9zMJ+DcWmvj3gZdZxVlWfuNpXxt17yo\r\nTJARKsskiIPzwpHS59swDbm2F4VhMhIr1U4=\r\n=b5iw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-1991-1018.0_1681401607950_0.16981491536414306"},"_hasShrinkwrap":false},"1.0.0-canary-2033-1026.0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2033-1026.0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2033-1026.0+75cab6d","@bodiless/components":"1.0.0-canary-2033-1026.0+75cab6d","@bodiless/core":"1.0.0-canary-2033-1026.0+75cab6d","@bodiless/fclasses":"1.0.0-canary-2033-1026.0+75cab6d","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"75cab6de007604a77e01d464711d7d94064621ed","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2033-1026.0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-XDCm0xbze80p2rjjAKTzVUJVghKVW/ZYFaBJWVVB9aku8+ogekWthoivjr4vUmIkzvCkS+uQieEkj90BaNAtUg==","shasum":"36e36c6df8e570c906d18743bf5fc6a58c8ade72","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2033-1026.0.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClJRFv36ysxf4MZ8wBzkgoFtSMJ9aReaC3ddEv4gt0uwIgWOoq1qxskScbcRToaMxdmtay9bkvYN+eZepmCKni+Kc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPVvEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPCw/+LwmjB4Sn/M7OOHVp9ZDx/1f9Rf7IrywAXbLPTTgM+CBBc8/7\r\nMeoWsYsi6W5LqegLJ9Npe0UcdWA2Ophoqoo+SmzhYWkno7VXpJpNG1JIzSlw\r\ni6B4J3y7kFG+z0xAtmnyKBk7THR3tM7zGBuQhj/u7oeCeXfooxKotxZj1dKF\r\nzWlCp6Z4hDqv4AayJL1mo5Frb6DfTJZc+QhhOEHfgsiQu6SSfvvzZd6TPXzZ\r\nx3EAgjSXC4eRfvX/N6+yews/HNgtpLez5czFRqujlpT/f46mNeG9b1RFV5wV\r\nraKu2VJXKY/X+pD/CX8PnP+X6Jv8F9t6l9yI2Q4il1jf0TdArWtDhj2oUb1a\r\nbiVdZIwSsVwFkcsvwGJTN4empwEmFJUOe64iDy0kO6/d1Eug+G0bJtOuwTy2\r\neYSPL97n+XX0zaGrFovSCSRMl5wLmvPHHYKThBCN3BcTScdJaeKK9cQ0QDUd\r\nW7ytftXGNTZdLqn+L+XZshJXSYLOd0YRMdOpNivWIE9MRbBc3ufqj+eVlIDV\r\n/IWHQZ+8BrMrpcLiJ1wBawsUClW3tzH3xZ2ksaDZ60LHnMzYNyFkfjctczBM\r\nLWs1i2mungw+blQUVTolyicYK8Fw0XUqxNv+CcaV9epwY/trN4wEGOrUDjmJ\r\n4NAtiv5pQtH3bpqtfVqtAFp3vxMr81vOIPw=\r\n=IUKj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2033-1026.0_1681742787938_0.908653374555044"},"_hasShrinkwrap":false},"1.0.0-rc.35":{"name":"@bodiless/youtube","version":"1.0.0-rc.35","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.35","@bodiless/components":"^1.0.0-rc.35","@bodiless/core":"^1.0.0-rc.35","@bodiless/fclasses":"^1.0.0-rc.35","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"dade4e37b75800940f3d34b57c53d724c68329c3","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.35","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-WQAzLQsIR0+sDnoA/EjhsC/VVyGW+pVsMnDXJPOLTw7rKpGgt93zElrycsP1pjUwumk99rlUwFrlLGuVQliBRA==","shasum":"a0ed5c94751e2598f1548dd0a34fc8926a77fb8a","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.35.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaxobkO/CL3apkbp4DsgR9x4ffdRo2XLLXJQ5Yt7GHUgIgR0z0lCWSjSmL7ZitviA29x/6C2Tuh4KXLLdbXCBo1uw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPV68ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoE8w//Xq0tQhh3DbS4vQPpvs0sBcGONAs4tFuZnouBhXc8pxgI+KZi\r\nDZH7HhfdXKs6bYWGEHsaIfCnnyVLEy54A4J6Z43FTCyBd/yYBumHaItvl1fU\r\n0ryiTixoCHz0dGlq4F7sYeRZGpfjtEkSvH567RreXgK+Qby5BxgnuWHeVOAf\r\ny2nZGzCL1RhFQZgsJ0wjdUxcgDG4SL9RXReIbAVU0DssR05PYuepnI93tTkw\r\nNnKUhMDxASl9M3iM5pqoaAQtGd9GLl1RHuW1mC8RRnJnAlFSaQO9eBHynUie\r\nOVt/ppYctNYmArKaY06PldvlNlpQYTJzHoD3QwQjthqTYfX4lJOVr2sHl0YT\r\n8wErrtQvji5RZUukS5Yc3KLyHuYEgmXlhWRalJKVuFFYpXYUQPOCx1NKqfk6\r\noWnXlmZf/QXDtxswIWZMdDkGkzyz5oiBY8RAzvpNMuKzASiqqm+NPl2nQDCP\r\nI4sSs6mTAerX+xT3Idxfbfp7YJPLBtSsuU81+UJwcqL4S/ymLrC6UOpSOwwi\r\nlbZhB6NRq4cXkFQffTufbedfMWTZmCTc+QNBOmF1rp/P1lbrmp7YBO7qRxf9\r\nJ/EPK0x92YOdPB6PL8V9BuD40lN5enx8RHvMUExEmuIYcMwzNGN0Az0Xw+0S\r\njCznRN97cXdBZeHP6lDdWoulgjGVAKEocwg=\r\n=RdK7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.35_1681743548124_0.87375007714668"},"_hasShrinkwrap":false},"1.0.0-canary-2035-1035.0.95b4a03":{"name":"@bodiless/youtube","version":"1.0.0-canary-2035-1035.0.95b4a03","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2035-1035.0.95b4a03","@bodiless/components":"1.0.0-canary-2035-1035.0.95b4a03","@bodiless/core":"1.0.0-canary-2035-1035.0.95b4a03","@bodiless/fclasses":"1.0.0-canary-2035-1035.0.95b4a03","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"95b4a03571d55cef06b23805fe43aa7f06a192b3","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2035-1035.0.95b4a03","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-YAsPmUPtMXESolw9sraQvkNuG8SPJyE2eTgYYAXqbIYJWSrKvVT908LvzMaTzSPesnm9NRoQUzE/btivAANjSQ==","shasum":"1150210bc16b593058a910bf7e046c22b4f8f96e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2035-1035.0.95b4a03.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxQZfFp7kz7I+Tja0FGqmFCqD+f85NKQArM4PHihJbPAiEAjplxevW/n2hZjNgTGoSMPQ2DjX20wDrh2rtnqbN+De0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPppmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpcBAAkHQ28/b4Eiw28/uOxYwHcjzv2Ziswsj53IkH5BQ1+Qrogmv+\r\n0S+8rCQvwVL7+K7MCO2l2txpvx/lj2PiO4oN5o78HeQ19nJ7QFEkO8E+EB0j\r\ntk5r1pFj4vKZMEuvJgp66KrfyufZj58p8oeOnFHNSJrMJBtbDyWkQ2V/9/o9\r\n3YWLl4GZucUERhE9RwC8Ds5fCOOUlz2Y3qHiI12f5LcIDgS8St4SY1trX0mi\r\n1pMspguhfaC3IY2drh5RcW8pyJ5CvZeWk9exgSsug7PP1+v0O449AdT1JUr+\r\nKs5bWJh6dGlUMhRC1PpHyEfk7/nRgbZPkxrffWu1w4fcClO/u0C4xXDBRuxy\r\nsXEbelVJp9cFkGs+2Mm3QiURdzcc1+HhQ+dwIye+JsOikskMUD83WBEidcaw\r\n47qCov8Y/Ib/dowyvDoXYGcw8M2TW5vQM8bfufjhdu995oycZvpRua4iXKUl\r\n64MPi0rWsAgaTE7MC2NekeJmVVCjptaAtuGczd7OfEGu9VunESzcCsPM4ws6\r\njeWC4YOwmbPFeP8uJytkyLQaN+W5R9WPsRHNB4N757hu84JKBfDqmHEEEqPs\r\neDHAe8qMouvrqV4yMZY7U7/VvVjadBFmtJtJNBhO+Ydbd3UFkxJ1jdA6c8Dt\r\nsB8Y+V/EsUYuf72nTjjaPDQygLveOWjGNSw=\r\n=8H+Z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2035-1035.0.95b4a03_1681824358311_0.8668125949630163"},"_hasShrinkwrap":false},"1.0.0-rc.36":{"name":"@bodiless/youtube","version":"1.0.0-rc.36","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.36","@bodiless/components":"^1.0.0-rc.36","@bodiless/core":"^1.0.0-rc.36","@bodiless/fclasses":"^1.0.0-rc.36","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"02dd8b0e4564b2fc6f89781f78759294be357465","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.36","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-PeF4UM/a4LqKivxBPDp6BI4cAGkwZH5Mxgqs6CcG1v2hBczyxmZNbIX6SWqDSWEsrJ6I2DxOlFf4eli8fY3J/A==","shasum":"089bf1be8c603eda5fdc65b122418a54d3e4d53f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.36.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCASo7Qs2fmZcw3NwisPeWUcBbOt957D+bXgWoJYBr1vAIgX6KwdfyXgjuJJScTZ42z1I79TpW6aD5gfNjq/MrkFDU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPp2hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRvw/+NYRq2UJl7LIH2v3SK6YfxTwuzohJyyMpgKJGcbKo/NzgTOML\r\njMXkwUHugFeSCiemQiaco8u5gkKY4jOJZO9/20vVAc9Exsg0IbN6hbRUv3Nu\r\nP/lHwVNNp83wYg/zk96dBfX8esqvuD3A0n4wEuM7V2/y7bHN4oMAlDIosMyT\r\n7j/IpWBnzMoGZ1JHs0W4nElKgEozEihtkNCYzibsrA1EMaprn/TCNLwlZRiI\r\nOkpQIlz5DnMQvYLbv420RsdwBX0GZePcSdU9Z+I1h6OcbxHKmYAQI/KXC1qT\r\nwPZmuBivjHm255PcQLOsbMU1Stmx1bwkPnWJlfktbwpseIeP3OClLcoDBsNG\r\n8OMpAIH19lXsn8TfoiIccxa9R7V8XcpG9zyIhz6QsefZ8TLcIXkstbhBuUXs\r\ndzDuoHevvFE4+S27l7kPfxm/tTNLOSm1+QPLlEcZj8KYuEko5aitIJHhEvRu\r\nh/oEHEsU6bJB9xermRr8xiUI1JKo0DeFsI1x+1EAhG6ODZKXsv4qYgtfJYof\r\n9IxwXIviestnabKTDYohdZuhfVWAV1M+aV8g7akz1UggO2qWg+4KJk3KUcRw\r\nNqqxzNKJYMtanfQZyO3Zh1nPgQUQrzn5qNhVID/nVFHA53AeLplwUaeZ7rQq\r\nHiZJHVzSnwlcJ6qCReLn3odR689h3hFj7CM=\r\n=Us6O\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.36_1681825184859_0.29942641344489873"},"_hasShrinkwrap":false},"1.0.0-canary-2037-1040.0.c6f2902":{"name":"@bodiless/youtube","version":"1.0.0-canary-2037-1040.0.c6f2902","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2037-1040.0.c6f2902","@bodiless/components":"1.0.0-canary-2037-1040.0.c6f2902","@bodiless/core":"1.0.0-canary-2037-1040.0.c6f2902","@bodiless/fclasses":"1.0.0-canary-2037-1040.0.c6f2902","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"c6f2902123d1f817680e7ac8eae19708c5788a9f","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2037-1040.0.c6f2902","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-AkTbmBV5F3YzFsRQNUGb5eZbpcU/8swEENYYGdT8ggbMNvXp42i8rF/TDum1W0F01hQLosEOjde+LbExhQ2q/w==","shasum":"a78b20bc7f02e9ffa396c2b47efde5545509f73c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2037-1040.0.c6f2902.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB88ypi9HWxYaOiLOGDCDdlkuW60E3kBwW0j+w3IX9BqAiEAz4TXscjp8nhrDR8Gdr5K0tcbmxL55G/Dr9h02S/JGP4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPq41ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwPQ/7BOhYLlDjmTIge4xwtoigNFQJEBCa1Lx1Hp+gMEz9SvluXerI\r\ntX7H3/pp0AzbSnOFHGgZ/eXofm8te6pxHvw8hZdLcWqQR4iybp+ou9tXTWR3\r\nJOPOlUcGj01XTsVZl1w5N/x3PpMl7p9Eb4R/Jv/I5qh9+c4A3HnpJOUrOho5\r\nJNB15bUMw13ILvOgpeAbYWdobGgn+h36R4TpfBO+s/MSJlgrsTvBMdExC1yA\r\ndLdRSHSCZOPnmJyhI1Z3NtVZwAdjHJgknGfYtxhTXsTvV1/kn7c6BUQTlK8A\r\n9kEE/DpvuJKuFq+VPbtbqOaz4uuyGSkRx8sBaucIq+HQOdQ8JVmaFAiC3dXC\r\nYE/RizwUdc1524T78gksjWrA2w2Sm++Wxj6Vm+TDqyZHT7ed6tMI4aoV1Og3\r\nxkRqEMXVZoq91D5r+DqHELRwsVxektc2HJQdP171e9mAXnNKh9cukr7dzLqV\r\nZviaufZqhSeBjcXkT61e33JKOwGRk5BjzAJqVwMqzug4ITVmifZbzLOiw247\r\nHxIpZ3Q3W4BsXYblMUR5KzFKH/cBGvxjTad7IWQxLAM0lbhlR6sVV2sojrPa\r\nbIWvct3mzXw0YCgzdt+rgZeo7dFpm8FRQb3uy74CkWa0o7olvGhjik/fXnfL\r\nt21NRZi7B/wPW3Ap3sgaamkgJS3Uo3IV0iQ=\r\n=N+5P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2037-1040.0.c6f2902_1681829429522_0.8361907357472895"},"_hasShrinkwrap":false},"1.0.0-canary-2037-1041.0.a3d24a4":{"name":"@bodiless/youtube","version":"1.0.0-canary-2037-1041.0.a3d24a4","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2037-1041.0.a3d24a4","@bodiless/components":"1.0.0-canary-2037-1041.0.a3d24a4","@bodiless/core":"1.0.0-canary-2037-1041.0.a3d24a4","@bodiless/fclasses":"1.0.0-canary-2037-1041.0.a3d24a4","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"a3d24a454a71f6b832a579659df0af79a177d538","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2037-1041.0.a3d24a4","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-nn5JmNXgFSNHuNIpdN+Z3e8bIxY6W49aZ/1jK533o5ZTDegn7MLEvpgIepFx0DmjhLG2qKEFbPtujAH8KwhArw==","shasum":"2ccf269978added9a8cceb54efa6274268a7d9ef","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2037-1041.0.a3d24a4.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOSA2RV2OmgiFl3RiR9e75/ClvZgWJw7n0y/UOp/vcnQIhAM4iI+9Ot1dLycgRPToWhu9RsJR/ZLK0Yfe/dzQrtZlm"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPrAYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQtg/+LboivXa6/QrrMNfpjbiZkFv4ZFFLm4QhHQKNxu3L52N7k1Qq\r\nIh2xoZ0vJ++aOJlaQLM8rFOx9wW1weMcVmowjDtn+nJivd4wQYYmO9AdMv4I\r\nxMLAceC/ib7UxdDq7qqI1Rq4tkOrBKu2aACJAjWNHKZfcxvECxnEGDSTAaSn\r\n+c9cY0B4doO/E5Bo/NnOivi3uHLiJCiRQnfLr/DwTWiUNQCBTwCQZOOJlynC\r\n1FXFdeyUZCotxvqmx7Y00QCKlSHeipnsbAvH/iCeTsa4AgDDVo4+5iSF7VFq\r\nDBR+ylUYHdJYCE7KDN65+Xww2bZ7qyYi/SIv155I1uOeIwxRHGgzbW3xr1Pz\r\n1SVtUqJhAMXuZ98BDlDS7TykOBxRIipKFg4JNVk0ov4QAIa1CbV5cQe7bHmE\r\nYY+G96DzAnJxjGfq8dvAXohTNEQJVLYy14QRQ3KopUmZVYzBD4gLck812o+1\r\nftJwNpy2vQlieaRP1kiFDLZ7vTOeVqEcENjGJsiWufVf1bcxO+X+2QsZbzYV\r\ngx2ez0DWNpLdfDRBHpG+ZmJvN9CmfwH8nE3zwWl4ffhXIk/7qIQVD/XG+hwI\r\n8MzU6QusxtnTZvjGBH20lLkvNw7o+KijHiMfvmwo4zQ7iX9NFeQqB5AILEK0\r\nblCjSd8nsYGkf3o7jNQS9lUJiF6JN6IsSn0=\r\n=6YB6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2037-1041.0.a3d24a4_1681829911960_0.6726782915096046"},"_hasShrinkwrap":false},"1.0.0-canary-2037-1042.0.b8ea86a":{"name":"@bodiless/youtube","version":"1.0.0-canary-2037-1042.0.b8ea86a","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2037-1042.0.b8ea86a","@bodiless/components":"1.0.0-canary-2037-1042.0.b8ea86a","@bodiless/core":"1.0.0-canary-2037-1042.0.b8ea86a","@bodiless/fclasses":"1.0.0-canary-2037-1042.0.b8ea86a","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"b8ea86ad12460bc4abc2f267448c656e32ab10fe","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2037-1042.0.b8ea86a","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Vh6OBVIGnLWuz6Vk2UOd9AlP1OVIxRARq8pp1uFiCfZGBIAPhBZtPR+NSKXPC287BX7OeO/Tl9NLy5SVjcdNpw==","shasum":"4b5672b500e2db17abbc0691ea81f48cbc11cb9f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2037-1042.0.b8ea86a.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOAE/PNf9A7F1Lorh2Jm3ai0A0+YWH158tO8/jlaUr0AIhAOkft8yGO7CfE68eVrNJPOskQoREz0KLgZIZc4seqgP5"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPrh+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovaRAAi+ywekX/HsZzJ3oyFLRscjb0uaPJbG027kJwBbncgN/1DVBK\r\nuRw3IYV3OJ5vquy+GZI24tNhUo2a52eoD9FJGTdTDrsxKe5Qzdc1fk6O+edV\r\nMTUiczwkwqgvfFYp14jD7j3xgtZI80FeQl/XRcOLjBw9DMj9z34ncGVBQVOn\r\nFMTbqdqREEezSby4pLy2Mppb2tVMmoRqjmCUloes90HibVqR03MmM1HWlef7\r\n9eUT5hnUz15O6Lx8EJeQu0bMdJ/uv4J2uRHajGCq4dfOWpg2wxcTsDz8qGhB\r\nLGjX9gFcby7rWYzlp19UlKCjsVMGcnOy/ea+7oAjCRRGGqxY5jAHg5gA00dZ\r\nb+/TVXo8MpgSlF9vzR5/bwEWBvIM5y38EHC2gcKdm+zwGtLOKUjy44e5+yL9\r\nM3Fk/7Ur5d97+cO0F2rvBDEXXRluiXGFk89Cp9iiXEs7eTTMTSVL9WnS8Ypb\r\ngt7nESzVGIJebwk1GRNsccVTRWQFUY+REyAM7btCGgCUaDX7QlgnwULf3Ifh\r\n5pwuRiLLGWw1+LK9CgToe0Z3Pug94Ghk3rrqhQckjYQYgnRHO+GRh7PSTPQn\r\nR06f0pAP4FLg9KA4R2tEgPvelz+FniDAWzkItKyIFb8yu7ZSeuRfELAsB/j4\r\nEhDIkYa7TofsL+hKJamXNl2xt/eb6ZUrQG8=\r\n=P0fQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2037-1042.0.b8ea86a_1681832061805_0.5406644141151722"},"_hasShrinkwrap":false},"1.0.0-rc.37":{"name":"@bodiless/youtube","version":"1.0.0-rc.37","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.37","@bodiless/components":"^1.0.0-rc.37","@bodiless/core":"^1.0.0-rc.37","@bodiless/fclasses":"^1.0.0-rc.37","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"d2288843aa0f7745b5379499a4433cfa12c48884","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.37","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-fjdwkA6xD0p3aFcwbeCgBzXx/Dt1SgKxFH+WQ0awkOyqP0S1duAjmpLXudV2PYBNFlUWVtgnWU3M1t2ok72mZA==","shasum":"beb96c74ce6e9cb1d1973c1425cadb5b507ef5b6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.37.tgz","fileCount":19,"unpackedSize":217155,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDA7HOA1aV6jAgmvm/dsz9MnPP8YpPhEQl61ECTclgjMQIhAM3yF5scOrul3iHx6uh/FBzeTNHM1UIP9B2vn9CM7wUA"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPw8uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpKQ//dsYrL11GmStJoU9KPTCmwcDdi0Yw8pBaXZqAzqNq/65wCTdl\r\nZZMW2y+mR6OicdKYaf9BzuQJqxAT8sPFZBYVvnqPT6c5XqF+bqVETAqR+xny\r\nB+3wCHdx0xXQqLRkcrAi92/+3RQnyuV0MKZOhC+nlOsaxd+ZKa8+G4JVeUsJ\r\nbV489UlMiHD1/mQtQ+lEMQwXT5HK5OA9JMmdZkPExdKjAHD24sX8UlPPHIQW\r\nhNpnoOCc85j6Mxy+6itFJq+nY/rU2g31c8AjYULep4lsROwgX8qxYeCULQlR\r\naMzFu/JGiUQoaax5TtR7NmMoEO7dEUpYnr7fT1Y3iHu2mOuCAtho8y/QHzJf\r\nFcjJu4viPnLC45cncel3K/Jij1UGELNYvvXmuPCltB0iA7J/1LH0nVTcV9J/\r\npQ4xJgq8cdo+K50yIgGljSKTQ9VZibOTyae3SiJbpEkMI/ctlji6DZ2c/oh1\r\nb58+xlIgOP7vYHt5hJrQmBoFTD8G0MgFwxF5IIxOsDCNHpowl+9QFOEuoJaT\r\nxljpZWjt3bpVS0AYTrA/h6fpSKnY96VdCHayYB+vFe9xVV6srXNJzX18flmB\r\nv9r8W7pv9E9YsoHMW256WW2khdNQ0vzITa4PwVU1AkGWoYTdDcu1hcgZ/m5B\r\ntSnpW/G8iHPLjZfEZrrW02wxXJSERmEiVq8=\r\n=QIa7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.37_1681854254062_0.9056862345056413"},"_hasShrinkwrap":false},"1.0.0-canary-2040-1068.0.aa2e178":{"name":"@bodiless/youtube","version":"1.0.0-canary-2040-1068.0.aa2e178","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2040-1068.0.aa2e178","@bodiless/components":"1.0.0-canary-2040-1068.0.aa2e178","@bodiless/core":"1.0.0-canary-2040-1068.0.aa2e178","@bodiless/fclasses":"1.0.0-canary-2040-1068.0.aa2e178","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"aa2e17885236447bf88018fe3e127e332620cffb","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2040-1068.0.aa2e178","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-KGG5WpW8uYP9uz4LazlqMlMHAVRZt9Qi9JX6sowLWOeQxaqKD/rxDjjLqEMXgPigB9tum26f2Yx3CEP/2ZhMMQ==","shasum":"cf3e32d59e50599f35856875dae305a9da7e5fad","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2040-1068.0.aa2e178.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERGu+ryYlIYn/o1itjF3Y6/pfRjKbZOzmXU4PbdEIpLAiB0MCFTq0tXGRtq8CZtt2p1CbnxpIQJKe+ZFqbYLi+5tA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQcrUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+3w/9FQKbQxgCy1J5AiGbd4B4CJTLw38UaC0A5va8poqaokPZzyhP\r\nOt2k/w8uhO7PBzNNNzHbNXCJkmBKMnwqgfIFZKVnwIInUzmVauHlf1Z1AN9q\r\nrxJXboefuAi9nqsOUxvncrhP5u66F35Wki3ubzC3AhbkFVoJYnXFJGSXJert\r\ntm7N8CLnXFjCZXLIg4F2uAhKwAZf5nEyqnvYQz3w6j61sSu1pCRz6voywPez\r\nWEOyaWRjZFVFqvg+0WJAzM0Mgt44WLCkbZi6JKV9J7x5e4sTbjtNbiL8ZU85\r\nHZbEEWumaRTy4gRr/I17zaf79t6xfE8CARKV0Y+uYquuAbatrV3nfH8e846L\r\nq70KcNw+R+59UxM4fnX7XJqgfuddbsqgJum6fZoY2aOInTQ8JH1fpSdSaFJk\r\nbWR8BAOK2v1I6hjPrx2UOHYHlj+jMyD3yaoFLaOO0s9Z9zZQcnc560KIrZC8\r\n3ejIyvP9dPdDTyJklTnX0bHIvjBF0dko/o6BdVwxTQ4xKf6OxUEXkn+iGUji\r\nL5ARYMcp893YS0msxLxWVovi1iaNV/A/bu/qOxTRm/GZZ6QkCXPdBi1z2aIU\r\nUrA+iCZik3/Ckfgy/YneeTyY8IIrZHzKp3MI41+gXylu9BV1ZLEX8jaQPM/P\r\n4aZZTXQdZYFPFdBcZ4CJgbAsYLUAa9649/M=\r\n=/B8O\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2040-1068.0.aa2e178_1682033363833_0.968769253793397"},"_hasShrinkwrap":false},"1.0.0-canary-2040-1086.0.7c842d9":{"name":"@bodiless/youtube","version":"1.0.0-canary-2040-1086.0.7c842d9","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2040-1086.0.7c842d9","@bodiless/components":"1.0.0-canary-2040-1086.0.7c842d9","@bodiless/core":"1.0.0-canary-2040-1086.0.7c842d9","@bodiless/fclasses":"1.0.0-canary-2040-1086.0.7c842d9","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7c842d9d5695d136aec8330f5a5ec3fadfebd3e2","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2040-1086.0.7c842d9","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-EO5d2atHUrGzScWfntWmA4LAyTZA7Rbqc1WQKtfIevTLofPrw4/utOust+B1t6uW11G7QE9W2+W8KACfEk/mhg==","shasum":"5b4f57a7c002720b65bbcd6b5ff13f6182bbd518","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2040-1086.0.7c842d9.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRBEXtShWgfdfa2TT7ssQkWyu04TMDDyMI4CXM+y6GoAiAmCDKuz1qpR/oWR/jhEDOkArVXKMycfWAl6L+px39KwA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSE88ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRdQ//aaADfgs6pL552vvfbbe0cTTWq7PvZQw4nI93XOK7cqHD1zJ5\r\nCEuZG42Yv1a8nZoDldBRVNgTYXvZZH6KGRBBEWI+0HkqccYu/e2kv5tDdpRG\r\nK9J9g2wyGh1red9/413J/k9+dxoI9Nv4badOZKpBx8bgBRFpTuawWAfhK48I\r\nE+WL6wCyjVFthiVJ2mBfrb5Cjwry6CEjtqlbWo8mWN5+GplW8MEaf5O9S+mP\r\n06hOEobixcxjLSwujVrdM6R9SumPyLVWxBoqCQ71uGYkv2lygM6obTey1ktg\r\ng3ZfFwXycvxxxUJJe69EXteI+3Y6WTypUSav8P4xNc88/kFKdnLstVAJad7b\r\ns9C82B6dw7re/uWCfynK4DVRtbxhnpaLu7zD6Q3gK4y7zjFhIpTonskd6jly\r\nKRqKu4wvBm1P/KSsVQZIf/bLkAUYIgPZgseLZSSKlhTTn88mtV2CHnNmeieI\r\ndZSKsNBc8ejOPB6V1+siaDi5h+TRU56Qc0ovHLFwUyKvsWv35DtcvOTeXA6o\r\nroxNF5A1XgxDP8tAFvcwYluloHNdAOr69om9ymST8AsCBp3t8QqI+m6cPs+v\r\nFUUsx4my+KhLcAyONUhNYle+IZz0SBR4uJ1mScGvE5bnjleQXkdnjCqDTkdI\r\nqyHxEsuDA5Z9F95/HlmJPOlYiXCrJF28Luo=\r\n=1rv8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2040-1086.0.7c842d9_1682460475922_0.942342038281031"},"_hasShrinkwrap":false},"1.0.0-canary-2040-1087.0.9766f74":{"name":"@bodiless/youtube","version":"1.0.0-canary-2040-1087.0.9766f74","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2040-1087.0.9766f74","@bodiless/components":"1.0.0-canary-2040-1087.0.9766f74","@bodiless/core":"1.0.0-canary-2040-1087.0.9766f74","@bodiless/fclasses":"1.0.0-canary-2040-1087.0.9766f74","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"9766f749268dcc60bb6268c156250574abb979b9","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2040-1087.0.9766f74","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-7kZXsUUPUCgPMVQLjX7lLWxqPb8j5zvBHjdNq7bcSgCjgoeh0Bdfiw99j+l9GScd4VxeO4FhZVwBdo3jIpokOQ==","shasum":"17f83f17b1f600c0f8cde5dfbf475424d7eb89bd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2040-1087.0.9766f74.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDPkaJXOtq5bmpGiga0aXE4b3b99e2HjWCZnSt/bX5fAiEArdO+06gPk4BeCV50g5nmme/cw6Z8GJr4pAGhxppUt5Q="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSIPdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5gw/+ISwVkxofMRI9U8AZ9wMQf/oPyaiNLebD7qWM1tRV9z28Ap36\r\nN8jKIBUFJh9AJRBUHHxxNfLIbMmHw3NFRWvd+yTebOcxfIRYzUZxyO9XjDLR\r\nxjESam3uKt+EXMTD1pcn1CpdLYDVCTlSLGfxTL88g2StRR0/2maDu9fZXkMo\r\njER2p51kmZziW782Y7rnhsyvRjM8Ja9YmF4dKMmqrffC6uSlx57XRLzgIRTs\r\nZbaNXc1qwkkA83MkFwwBML+CN7RUn0cvwNlYZVLemEWN2BntcAJ480r8ptp/\r\n0PABTUoYzLRrmNKBZWuXx6fnIiqBQT2TkzoAuTL+5mK7W+5smkTRO43APELv\r\nHMWpg94ikqN7mqpUJYbH5zv0OkSGunyCjBeX3qHmV7MwrlbZ61AkmDTPV9Tv\r\nsLua7wsOhlXQEzmAGHgoS0sN2Jxz8hVA8jj6ag3l6CaLwuCYAjcKvFavPMiI\r\nkBS2bFbW52Dbnf803oUETeI+I+epX9AoFDWgC1w29m3sTmouwo01K8kZY+hV\r\n/J7lvVhIM1DzxSFUq/A7VOXGFaWZuMas8y0aDfq6To/FzszLEzv5N5oCCuvU\r\nQLE9aqLhYv12yD8XCH0q6IJN0eF47rcAhK2CKkzU6fCEtU44tzCw3z1qyMZt\r\n6JJpGHgQUFZBGBpwRvxnXAjd8pfa2OJ6UXA=\r\n=ZSms\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2040-1087.0.9766f74_1682473949699_0.28271649343780525"},"_hasShrinkwrap":false},"1.0.0-canary-2040-1089.0.ac009c0":{"name":"@bodiless/youtube","version":"1.0.0-canary-2040-1089.0.ac009c0","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2040-1089.0.ac009c0","@bodiless/components":"1.0.0-canary-2040-1089.0.ac009c0","@bodiless/core":"1.0.0-canary-2040-1089.0.ac009c0","@bodiless/fclasses":"1.0.0-canary-2040-1089.0.ac009c0","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"ac009c0acdca09b144582a8318c1e3363f8486e7","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2040-1089.0.ac009c0","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ikFn58mdbvxG46xk10uzgc/SSm52AGm2Ev3620n4fS0GWgQyt1Wz8Jl3BC+TEG6fKVFmH0bernpEjxRR3Ye6fg==","shasum":"cfaee03a9b521d0c0300551d58e2f7debeea8f19","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2040-1089.0.ac009c0.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXOkRpcZDRTo47N4nrYCyTbBUV+JsD7eMTkHjf1cXMzgIhAJ1+YmQJfzKdtLPZJXIHhx3nfWQEja7e+uN+s5lKSqBT"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSoK8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaVw//XfNFVmxp7yRgJCepCcLYCf9+DCqhZ888eCvMRSkoVXO+VkfA\r\nzXwgC1Q/WSWHrsSUVC7prX4PA3TBw68U93TXmbugGo/toRbC13NGssxyxquM\r\ndm9hIh2GDwF/PdSbJNtz9x95VwcprDaqG1qOXAgXnLhtO3LoYcgbhWgeH6AZ\r\n6KwcOowfiYCifpIJ1ifg/cw0Jsc5HELCkiabuGzkq9N/+ILa9J4PDBGdlSOS\r\n2eyKQUZpVorH76GP5LAY46H3kGJ3VHYPbHqQooMj0Md3B7mxMkYflZkyWDSA\r\n9YRJGLT5Sbd/NiI73hOeWZa9YLiK5Vzdfa1NN0moxfD3va5crOju19lFkXVI\r\nq1KF+4wwaKlXQrrmNaKxwZ5MNcppSXcFQxlZ8dp3437SpRmlAwrZsHgYV6sT\r\nf3M3SAxWoC9AvEUCdwZCrwBF09eAREF+kRrcdsSiowUgtasEJTPJPOD9SHmY\r\nAfO5lY0WflsGZ5QybiJDmuiGWyKgvoWjWRcHQ4A/Oj0GY4pMaOhez9cn0jvU\r\nmMpPz32qnznY6nHjONSdhQHGOFsdnOJlz2TjQRAyNdSIe/Z1EcngpkNLTp9z\r\nLFcCiVS5z6yNxK1ODpEQc6emKW9PXXsUsN5qL2QSrdUy6wdmqr7u4MyC2vuF\r\nOVnH1s6/eGXtf5LlZQGSukjwmmPstHnj8W8=\r\n=HvzO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2040-1089.0.ac009c0_1682604731964_0.8941548531198671"},"_hasShrinkwrap":false},"1.0.0-canary-2033-1122.0.bff6645":{"name":"@bodiless/youtube","version":"1.0.0-canary-2033-1122.0.bff6645","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2033-1122.0.bff6645","@bodiless/components":"1.0.0-canary-2033-1122.0.bff6645","@bodiless/core":"1.0.0-canary-2033-1122.0.bff6645","@bodiless/fclasses":"1.0.0-canary-2033-1122.0.bff6645","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"bff6645867ff84b24018d192635ce7f08b8512b1","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2033-1122.0.bff6645","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.6.2/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-nihAHP7etzbOQo/BRZT4Mw4VHSggSNS0bifJ944TXkAux5gFASCQ9bezuN2rlt3Uhkaa8igKjk2WYEp6fzxYvw==","shasum":"050cfbb418eaa52cc322fbf3edb147fbb75f416f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2033-1122.0.bff6645.tgz","fileCount":19,"unpackedSize":217213,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9JODWuwaybNUndY4Lo8c66OLODauycQBTLKiw0pZALAiEAnX0DTDJ6UeSLe7kL/CQAhfgzx8xlQPm6Sx5dS6sbusY="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2033-1122.0.bff6645_1683505767466_0.8211906049043385"},"_hasShrinkwrap":false},"1.0.0-canary-2074-1123.0.b4e2ff2":{"name":"@bodiless/youtube","version":"1.0.0-canary-2074-1123.0.b4e2ff2","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2074-1123.0.b4e2ff2","@bodiless/components":"1.0.0-canary-2074-1123.0.b4e2ff2","@bodiless/core":"1.0.0-canary-2074-1123.0.b4e2ff2","@bodiless/fclasses":"1.0.0-canary-2074-1123.0.b4e2ff2","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"b4e2ff269fe706f2d0f6795fa7bd8f0f7510a8ef","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2074-1123.0.b4e2ff2","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.6.2/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-aub+J6JzNBizazgIssDEzakwRgYwEhNDOSKJ/aAkNw7G41u2wu+Vla+4iAZ/WMbDPaDP+MKxnNZU7b0CceOo3Q==","shasum":"2c6cfc1c59fa55159381127eec64e2a5ae39b14f","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2074-1123.0.b4e2ff2.tgz","fileCount":19,"unpackedSize":217213,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbBvXLGwSxvCJnZIiTe38pEWkQlV/jK5tcgM98q3aieAIgScWEFbjbCTmwc1yK3oQL5JlXp6aUaLHfMivIKxpK1/4="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2074-1123.0.b4e2ff2_1683510448584_0.549165611314339"},"_hasShrinkwrap":false},"1.0.0-canary-2074-1124.0.eacc3f3":{"name":"@bodiless/youtube","version":"1.0.0-canary-2074-1124.0.eacc3f3","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2074-1124.0.eacc3f3","@bodiless/components":"1.0.0-canary-2074-1124.0.eacc3f3","@bodiless/core":"1.0.0-canary-2074-1124.0.eacc3f3","@bodiless/fclasses":"1.0.0-canary-2074-1124.0.eacc3f3","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"eacc3f32c7732fb09efc056cd792e0488d96bdad","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2074-1124.0.eacc3f3","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.6.2/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Y2U6muT76cHolaZB5qYqvI8lB431+MSW8sG6e2Zsfrkkr3RNKCQ3r8Hq1zE56b9P7gnTRdnS1ggut66Pe1C3IQ==","shasum":"f40be65b7d45c986c5826281dd430cb5213f79e3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2074-1124.0.eacc3f3.tgz","fileCount":19,"unpackedSize":217213,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5K07BRBn8Y2s6S7dkqEfjFRKBuqk6iUOLb1tQIMBWPgIhAId8EuC1K+cNwZQ58aEjVAcSvP867AVmgMi6tHiT7d7R"}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2074-1124.0.eacc3f3_1683512939734_0.9181726627295126"},"_hasShrinkwrap":false},"1.0.0-canary-2074-1125.0.b66ad73":{"name":"@bodiless/youtube","version":"1.0.0-canary-2074-1125.0.b66ad73","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2074-1125.0.b66ad73","@bodiless/components":"1.0.0-canary-2074-1125.0.b66ad73","@bodiless/core":"1.0.0-canary-2074-1125.0.b66ad73","@bodiless/fclasses":"1.0.0-canary-2074-1125.0.b66ad73","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"b66ad73224d07cf4f001cb50eacc146d0a89ff99","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2074-1125.0.b66ad73","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.6.2/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-2IwXWGDlCULKhNR9JNVAUhUPSn3SU4krIsAR07kMWujyOEqQUsMzuALMBE+swCnQSL4Leh9ICJRlafQWgylK9g==","shasum":"44d1eb7556cefdecfcb8b6dc1aba78d0ea70d8f0","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2074-1125.0.b66ad73.tgz","fileCount":19,"unpackedSize":217213,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFe0shmFolTEIGibPFu1GtrCLV9KFqL93LXCqJDEuD9mAiBkntbE+9OEMXFFrqSL8xEI11x2TNuJzOW08YAZapOuzg=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2074-1125.0.b66ad73_1683513937292_0.1280252987785757"},"_hasShrinkwrap":false},"1.0.0-canary-2074-1127.0.4197db1":{"name":"@bodiless/youtube","version":"1.0.0-canary-2074-1127.0.4197db1","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2074-1127.0.4197db1","@bodiless/components":"1.0.0-canary-2074-1127.0.4197db1","@bodiless/core":"1.0.0-canary-2074-1127.0.4197db1","@bodiless/fclasses":"1.0.0-canary-2074-1127.0.4197db1","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"4197db1e86397a98f1a2a70de80b1d8ef4a6e439","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2074-1127.0.4197db1","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.6.2/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-QDYCtST0BvFoSmahwSE0fufJ+Fra5OC3VjHva8pnS3DakMHhoWbWZCU9mIH4INR+S/vUAWLkWTOJfP1yizAQbw==","shasum":"8fb3b71d1dd65e240a47191769e016e198dc6dcb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2074-1127.0.4197db1.tgz","fileCount":19,"unpackedSize":217213,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA56zAK/G4Sule9qQPduIdRg5PO2LR+qoqvsUcJVttN0AiEA3UgmIZ2McpnpeUXcc/+JrZjPC9/E28/C5GTOS9Qfl1g="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2074-1127.0.4197db1_1683515598272_0.4109443080807009"},"_hasShrinkwrap":false},"1.0.0-canary-2074-1128.0.6dfb10f":{"name":"@bodiless/youtube","version":"1.0.0-canary-2074-1128.0.6dfb10f","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2074-1128.0.6dfb10f","@bodiless/components":"1.0.0-canary-2074-1128.0.6dfb10f","@bodiless/core":"1.0.0-canary-2074-1128.0.6dfb10f","@bodiless/fclasses":"1.0.0-canary-2074-1128.0.6dfb10f","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"6dfb10f4c8570fcc413c49523a520b730f94ee1f","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2074-1128.0.6dfb10f","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.6.2/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-Dp86IYE/Ar48Txeddm5Y2TUPSAomnj6JP5Q2r6Lp57uBYQ/ngiXbS64mARIanwVXcVM7S4dyMQc0/YUdLclKDw==","shasum":"1bd1057f1af747d34eab0da38ac63ed86a16d52c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2074-1128.0.6dfb10f.tgz","fileCount":19,"unpackedSize":217213,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD989oGiPK/sdtpHhZ63Gcf2ZV1Y9EY91h2b4ajGiusgQIgLZObS0TZRfYaYSgZE53TH8l839NaIPsl/jgo6fkdZAY="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2074-1128.0.6dfb10f_1683517261930_0.8749563192556884"},"_hasShrinkwrap":false},"1.0.0-canary-2074-1129.0.d4a1eb8":{"name":"@bodiless/youtube","version":"1.0.0-canary-2074-1129.0.d4a1eb8","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2074-1129.0.d4a1eb8","@bodiless/components":"1.0.0-canary-2074-1129.0.d4a1eb8","@bodiless/core":"1.0.0-canary-2074-1129.0.d4a1eb8","@bodiless/fclasses":"1.0.0-canary-2074-1129.0.d4a1eb8","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"d4a1eb8aa1c457b6ab299b56efce5181a6d84e9d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2074-1129.0.d4a1eb8","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.6.2/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-naG4E5XwKqsrrHHVbEmGlcsAKFoQLqZjKQvyfP9wX+H7zZMjysX55wYh5JTPJ5f6sg4U1hUdvi5ktDYLFolwWw==","shasum":"ad12463dfff1c05017dff36f323fe035846a20cf","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2074-1129.0.d4a1eb8.tgz","fileCount":19,"unpackedSize":217213,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJ61QS9AunszmbcwPV3DWbOh09X7bBUyizR8fadv55rAiEA6rr81qT9kEN/FKkUAMk7bRRl6CLes1xndjoQbKRhvFY="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2074-1129.0.d4a1eb8_1683519045253_0.1578228891359854"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1132.0.7904ad6":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1132.0.7904ad6","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1132.0.7904ad6","@bodiless/components":"1.0.0-canary-2055-1132.0.7904ad6","@bodiless/core":"1.0.0-canary-2055-1132.0.7904ad6","@bodiless/fclasses":"1.0.0-canary-2055-1132.0.7904ad6","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"7904ad658034f1bd9f730821c3a64f2757553e5a","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1132.0.7904ad6","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-hDBuvktSrtLHY9tmQKPIUt/rvqjSHUQjHvv3E1DuZLy6pyUkWAzqaPPBJXLbwNkQ/F2k6PcQiBlfJK0XFzN3oQ==","shasum":"9a4fbee42b645a308051694bd9fe2ecf1b42b19b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1132.0.7904ad6.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChwG2/BVhoLMVhQP7LYKKdq/Uz5ZLg3EXAxxLIwDf3jAIhANCq/RdwoofxP+L+4JH95LyhRy0ioXEeIZn5kG/vW6iG"}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1132.0.7904ad6_1683575962575_0.30214313804134907"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1134.0.0a6933a":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1134.0.0a6933a","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1134.0.0a6933a","@bodiless/components":"1.0.0-canary-2055-1134.0.0a6933a","@bodiless/core":"1.0.0-canary-2055-1134.0.0a6933a","@bodiless/fclasses":"1.0.0-canary-2055-1134.0.0a6933a","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"0a6933ad5b28e606ec1f428aa2163d6d01d0806f","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1134.0.0a6933a","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-24HS5sen2pB36s+VhyviRPpSXUFgMOx87QeYqmgUIQ6kd9WepdvhF2b8CHcAdFTuWWizCErCdkerQRs0DAnoww==","shasum":"2fe4dd14875e56915aa511b9948378cf0dbd14c8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1134.0.0a6933a.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICq/sSCGBWBIQlkXaTYt4X0qh/REnJDAf4V8+oNbMZWzAiEAkG6X1YcFJbYEM4iwX8jkSPVaTytXszfrXtK4Ae10MRA="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1134.0.0a6933a_1683584294941_0.27344680892472506"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1138.0.164310e":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1138.0.164310e","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1138.0.164310e","@bodiless/components":"1.0.0-canary-2055-1138.0.164310e","@bodiless/core":"1.0.0-canary-2055-1138.0.164310e","@bodiless/fclasses":"1.0.0-canary-2055-1138.0.164310e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"164310e48ad75c4aad84d318efc7f0861dc92c5d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1138.0.164310e","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-cd0Fmk8xCkJztD6p8lTn+4ndJYFuAItfBEAGtsaAr/eZrvYkhnSVvaKOFWQR6ffAkb3XeJDfSRAJEeIRV1cWBw==","shasum":"2a393d4f9ad3b7d19aa92c3794cda55e2be49dcb","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1138.0.164310e.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCM3Oh9s4PRdLUGioO2RJ93Y5VqyBwSKePuLtRDlZ5uSAIgWxE9jX4mVWMC3BnaotqaxpgzETCXCOEwofcsvjEXOIE="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1138.0.164310e_1683819096221_0.38531830668701894"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1166.0.164310e":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1166.0.164310e","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1166.0.164310e","@bodiless/components":"1.0.0-canary-2055-1166.0.164310e","@bodiless/core":"1.0.0-canary-2055-1166.0.164310e","@bodiless/fclasses":"1.0.0-canary-2055-1166.0.164310e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"164310e48ad75c4aad84d318efc7f0861dc92c5d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1166.0.164310e","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-ZGFWUaCXVrdKfCW6VvOIM1YseyTL47/qCXcnYM7zctMjKyeF5ZR7urn8q60bwX/HS5htmIqPRIxF2MQDt6VgTg==","shasum":"fc2cc73b92d68fca6fff3a6b795f369749f429a9","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1166.0.164310e.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZKNIV2Qp4WFkYPOIZyhydbGeFOU7yIldnSrpfcyqJ5QIgJKNXuudE4RMB+/VAZLsx9aDsdV8kzn/zVnPH/gj4J9E="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1166.0.164310e_1685052743603_0.6199206830359751"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1167.0.164310e":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1167.0.164310e","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1167.0.164310e","@bodiless/components":"1.0.0-canary-2055-1167.0.164310e","@bodiless/core":"1.0.0-canary-2055-1167.0.164310e","@bodiless/fclasses":"1.0.0-canary-2055-1167.0.164310e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"164310e48ad75c4aad84d318efc7f0861dc92c5d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1167.0.164310e","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-OWXFeBOqwTXSGXoR0wvqA/BHLV9Sk+lWfX+xD6h6q7JBgP3KiFskKh38/ZnyucZsU8m9ijaof9kuIldMe9b2mA==","shasum":"37a17096179fe031ec7352a9e611c1a797a8a235","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1167.0.164310e.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBzjbN/f8WpIg3+yt4zmhkrw4ZObpn3dmWU7c5lwOW9mAiBzcqRrc4mLedb+7Zvhy3kqp+7yTwG5TCqPF+LawxBQmw=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1167.0.164310e_1685055115791_0.6606809354074148"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1168.0.164310e":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1168.0.164310e","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1168.0.164310e","@bodiless/components":"1.0.0-canary-2055-1168.0.164310e","@bodiless/core":"1.0.0-canary-2055-1168.0.164310e","@bodiless/fclasses":"1.0.0-canary-2055-1168.0.164310e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"164310e48ad75c4aad84d318efc7f0861dc92c5d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1168.0.164310e","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.0.0/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-54ksY9JR50/jQW4sbgKHDbE7+gN/MnLlZjHbFMSbibdrGOZtJcVk+6Wi3fTExN/4A2fePTAmoDM4L1DVGTjNnA==","shasum":"87deeccb0dc4fd251c0978281e50f5eb3a9acf2e","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1168.0.164310e.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErwif7MmkpX5uHmNP/o9cRe4X+DGcABtzwC6dNIy28MAiAwYM3OuAu6qM29zLb8tIjXJ7e2DcteyZKCuiVJcK7lqQ=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1168.0.164310e_1685055343116_0.31267730340766997"},"_hasShrinkwrap":false},"1.0.0-rc.38":{"name":"@bodiless/youtube","version":"1.0.0-rc.38","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.38","@bodiless/components":"^1.0.0-rc.38","@bodiless/core":"^1.0.0-rc.38","@bodiless/fclasses":"^1.0.0-rc.38","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"5abf6a00e50ca2ece9f3d00f90f0f1469ef3bb77","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.38","_nodeVersion":"16.13.2","_npmVersion":"lerna/5.6.2/node@v16.13.2+x64 (linux)","dist":{"integrity":"sha512-wiYfYg3Dg0m0dqr+KTWvNMHXDUHEow+J4cL5S8who9CgeDEsrBprAWoYArxhlVcEVLZT1Roy0d0fnlr240Ep+g==","shasum":"55a84b16a5312812409fcf4f66da646c83efdca3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.38.tgz","fileCount":19,"unpackedSize":217112,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbKR5rGQEJgJNbL9R0fTNs4RS1PS/9vJItNNZhSeGDOwIgfCtVvPvtTm/p+KL6qh28C0+E17Pyd9wAnfDivMULFQc="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.38_1685494167665_0.3259334856391307"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1248.0.164310e":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1248.0.164310e","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1248.0.164310e","@bodiless/components":"1.0.0-canary-2055-1248.0.164310e","@bodiless/core":"1.0.0-canary-2055-1248.0.164310e","@bodiless/fclasses":"1.0.0-canary-2055-1248.0.164310e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"164310e48ad75c4aad84d318efc7f0861dc92c5d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1248.0.164310e","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.0.0/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-xhh/1LyQeWgxZjjVKayxL/h40KDRb8+sd+odk7sLi7MTiyk268pYBIxQABWmoVhQJoiAV5cmaM/+ftbPEOHSqQ==","shasum":"149914adecfb0e512a7347aeaff4076181436913","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1248.0.164310e.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWeRyAstOn4kx+2BGCKQTG/fSZ8lhb1Fw5TCy5N0PbUwIgNQ/IJW4VzXgx6IltecrTLODtiC9nMnLQsEWNhfm4O6c="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1248.0.164310e_1685650009284_0.19719294560190348"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1249.0.164310e":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1249.0.164310e","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1249.0.164310e","@bodiless/components":"1.0.0-canary-2055-1249.0.164310e","@bodiless/core":"1.0.0-canary-2055-1249.0.164310e","@bodiless/fclasses":"1.0.0-canary-2055-1249.0.164310e","lodash":"^4.17.19"},"peerDependencies":{"react":"^17.0.2"},"gitHead":"164310e48ad75c4aad84d318efc7f0861dc92c5d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1249.0.164310e","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.0.0/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-mxTmyT//M/8N4DHVIYI+ABHMivPSeNTOnf1mynSvynVRN/f7YPzpLJMC3fRfRKOAtDrENwsNoXrwbLT3hd08kg==","shasum":"d94e1c9b78321c436d19579574c4fedd12bd688b","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1249.0.164310e.tgz","fileCount":19,"unpackedSize":217256,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGWdI102R8kRoPKh/s9kxGqautsqFCQq5lLuDyR6X2TAIgCC0AxaSlpsOVOQJ0ZBWQeJPytrvYzN/vXs1T4Z9MHL8="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1249.0.164310e_1685653029438_0.691400854878016"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1251.0.828ddef":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1251.0.828ddef","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1251.0.828ddef","@bodiless/components":"1.0.0-canary-2055-1251.0.828ddef","@bodiless/core":"1.0.0-canary-2055-1251.0.828ddef","@bodiless/fclasses":"1.0.0-canary-2055-1251.0.828ddef","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"828ddef8acf049c739684aba01987ea79b989a89","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1251.0.828ddef","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-ISgBu4e3BlylIuFUXzFtF2yuHV1tI7GL9MoieqIkCJ5jlh1lBp+H7NiKSf/BdQ2HjVGZCSz7bJNhSonDb8T0vw==","shasum":"093d1e970ff26d824325d3a00213015d12802998","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1251.0.828ddef.tgz","fileCount":19,"unpackedSize":217231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDZunFBE1wOkObj5qLYi5TzaZScQERDA+M6Ed+5m0hzAiEAnpgS3IW0ajUkVEa/vF60IgQdqX1E2kV4DcqrZm5XBhE="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1251.0.828ddef_1685653506933_0.27993101878239046"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1250.0.828ddef":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1250.0.828ddef","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1250.0.828ddef","@bodiless/components":"1.0.0-canary-2055-1250.0.828ddef","@bodiless/core":"1.0.0-canary-2055-1250.0.828ddef","@bodiless/fclasses":"1.0.0-canary-2055-1250.0.828ddef","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"828ddef8acf049c739684aba01987ea79b989a89","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1250.0.828ddef","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-CV53LmvSfcKs+Y4+njioFBRV7CwKJQKulP97p24eMNHDqAmKi7uH7eOEC7dQvsXdOkAYpUh7pEIK69jojPUu4Q==","shasum":"464fb4c01316701e16d46ab84e0883f01373488d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1250.0.828ddef.tgz","fileCount":19,"unpackedSize":217231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHhdQrCLmt4hT4SQb0pQkBkHCFtH4qVxLAyqMUSKOyPgIhAKP3cxQaBsZcwe2KC/b9lkMjawcyFEmMSQM8aloS0/dl"}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1250.0.828ddef_1685653599942_0.9183506931899998"},"_hasShrinkwrap":false},"1.0.0-rc.39":{"name":"@bodiless/youtube","version":"1.0.0-rc.39","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.39","@bodiless/components":"^1.0.0-rc.39","@bodiless/core":"^1.0.0-rc.39","@bodiless/fclasses":"^1.0.0-rc.39","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"5d94dc9154f16d009d77e17ac90a0b9127461d23","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.39","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-PsrdVN4YiDXVFdNx8TmKToCbjE/ukLzJRxwHmkno4hWw1utGlE9rJEEcVPxAqkPvpPEHZF2CcFOXhvZNZclzsg==","shasum":"4d68ef4427d145de6ee614e08ce3b05b7e9c18e6","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.39.tgz","fileCount":19,"unpackedSize":217112,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9+mr4UqSepv0BCMIZi5J1wuaVwzNbSbLsjv2FOTZM6AiAeUG540l2RoXmVdHEwA2vbva8nYEkzrZBNburfkaBZsQ=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.39_1685659460371_0.6648717027830426"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1255.0.828ddef":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1255.0.828ddef","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1255.0.828ddef","@bodiless/components":"1.0.0-canary-2055-1255.0.828ddef","@bodiless/core":"1.0.0-canary-2055-1255.0.828ddef","@bodiless/fclasses":"1.0.0-canary-2055-1255.0.828ddef","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"828ddef8acf049c739684aba01987ea79b989a89","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1255.0.828ddef","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-Hft/LvY+lZI1JAlnJrMd4C2JRkVFaxHYzU96K1dULoW2L/w+a4xJES11fLz3wCXxZ3XUoQpdvzRXpC55/at4/Q==","shasum":"d7dd429c65640ec77d08c99ab589baea217ff054","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1255.0.828ddef.tgz","fileCount":19,"unpackedSize":217231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXFpQh5emtvOugG6Dn6YZiZh5YDzo3A3tbU/ragZwrmQIgWqK48OWIDCxNpAH2fHCgRGfbxxDAGCAbkFgVuwtsxhs="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1255.0.828ddef_1685731251928_0.9216963847504922"},"_hasShrinkwrap":false},"1.0.0-canary-2110-1282.0.9ec19aa":{"name":"@bodiless/youtube","version":"1.0.0-canary-2110-1282.0.9ec19aa","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2110-1282.0.9ec19aa","@bodiless/components":"1.0.0-canary-2110-1282.0.9ec19aa","@bodiless/core":"1.0.0-canary-2110-1282.0.9ec19aa","@bodiless/fclasses":"1.0.0-canary-2110-1282.0.9ec19aa","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"9ec19aa66e8ec8185c8879c96aab172b89e86801","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2110-1282.0.9ec19aa","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-aKfS4K3hT1+ea48jceGKvuEaqdJZktX7Px61e0utB9dbs7AAfhnlDwewHq5b8p/CkWE2XrLVEjbLine5cgv2Iw==","shasum":"0f3708b160a3bd60118ca0dee07d1e2dd20109f8","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2110-1282.0.9ec19aa.tgz","fileCount":19,"unpackedSize":217230,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiE4RqHDwZ10wblaUWlzDhia/Gtfc9EqcYBuIuCZT3XwIgdjspMWgipHSyv5XOh0JGVA6HlxHJfhxRUMqHY9uWj0U="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2110-1282.0.9ec19aa_1685928067372_0.012065317510294715"},"_hasShrinkwrap":false},"1.0.0-canary-2110-1283.0.fc3628e":{"name":"@bodiless/youtube","version":"1.0.0-canary-2110-1283.0.fc3628e","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2110-1283.0.fc3628e","@bodiless/components":"1.0.0-canary-2110-1283.0.fc3628e","@bodiless/core":"1.0.0-canary-2110-1283.0.fc3628e","@bodiless/fclasses":"1.0.0-canary-2110-1283.0.fc3628e","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"fc3628eaf88b9eb0e6ecb4cfbd0cfd56ae8e35a5","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2110-1283.0.fc3628e","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-Yt2AE/YSHehPe6v/RnLNaHI5DBLOGcT/0JFctcbJ3/49mer8lgHo3CkOVzwfggcYrpIlK/nRUqHfZbe11sXOtw==","shasum":"7e196d3ca27d3308ca13307483ec5a3efc3155b3","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2110-1283.0.fc3628e.tgz","fileCount":19,"unpackedSize":217230,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2118idt4ixkQh2UQVCkoUsgnKR8QPZWRxN27xG0Z24AiB00nnTCSD2BH4DY5DqIdvt8mRO7d2JF40cPLOmSzOChQ=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2110-1283.0.fc3628e_1685933729780_0.04507519089874412"},"_hasShrinkwrap":false},"1.0.0-canary-2110-1284.0.47d8a52":{"name":"@bodiless/youtube","version":"1.0.0-canary-2110-1284.0.47d8a52","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2110-1284.0.47d8a52","@bodiless/components":"1.0.0-canary-2110-1284.0.47d8a52","@bodiless/core":"1.0.0-canary-2110-1284.0.47d8a52","@bodiless/fclasses":"1.0.0-canary-2110-1284.0.47d8a52","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"47d8a5239bd7ec4b8e8899133a558faef31c5ae3","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2110-1284.0.47d8a52","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-xLgV8Fj79ltfyb/H7SkrTGsDch7lFbLJEUXSQ84bJ+xZ1D6yoRJeAs2qS9r0nBXE1hP7FLbgf4CmE84ijMFOpA==","shasum":"8e2345f9acb1537dba7489d5d241a28fc2026bb1","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2110-1284.0.47d8a52.tgz","fileCount":19,"unpackedSize":217230,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWf9DSxUYmSo6Y6YMZeQTsVZWyZIz8K8T2RJqTyGuAwAIgVl4ewZhL5y/TPMFdaQwYHMtE+sgbc6Bc/cxM5Kar7/g="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2110-1284.0.47d8a52_1685956392293_0.3988509333032293"},"_hasShrinkwrap":false},"1.0.0-canary-2110-1285.0.8eaec74":{"name":"@bodiless/youtube","version":"1.0.0-canary-2110-1285.0.8eaec74","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2110-1285.0.8eaec74","@bodiless/components":"1.0.0-canary-2110-1285.0.8eaec74","@bodiless/core":"1.0.0-canary-2110-1285.0.8eaec74","@bodiless/fclasses":"1.0.0-canary-2110-1285.0.8eaec74","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"8eaec741c2c037adb749c9df1bb261abea63e67c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2110-1285.0.8eaec74","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-6TPxdQu0jqxBJF51yPVXq7eZdqJYbuW7JmtQ0/Psbn3axGuzojZKECavGfhW56dzdd2Zgy1h8NwXibep/Ug+eA==","shasum":"b751c2c059841a3e9791a2699abc43be2df0db26","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2110-1285.0.8eaec74.tgz","fileCount":19,"unpackedSize":217230,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpS8NUvT0FRukhkv8sV17Cq/bD7Hpm+VZoQ02buZUaJwIgP2IgMXuYMVof2aX6FHjkL4/82Rv6njgL0YLNv5o9wAw="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2110-1285.0.8eaec74_1685961750352_0.6812364420380972"},"_hasShrinkwrap":false},"1.0.0-canary-2110-1286.0.ae630a7":{"name":"@bodiless/youtube","version":"1.0.0-canary-2110-1286.0.ae630a7","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2110-1286.0.ae630a7","@bodiless/components":"1.0.0-canary-2110-1286.0.ae630a7","@bodiless/core":"1.0.0-canary-2110-1286.0.ae630a7","@bodiless/fclasses":"1.0.0-canary-2110-1286.0.ae630a7","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"ae630a7d064eee35b7d75fb0938b6b2333bb9e8c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2110-1286.0.ae630a7","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-KnvDmtDZ2mprFo9NbrmajkMPkFWRhZMrq3HoVzPNY/lMgGxF8/zlptf6FMQAsV1K+Ck718z5dJsq2t90cxL53A==","shasum":"b171110d4095d5d4edc121b8f0ebc9a8a9326bbd","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2110-1286.0.ae630a7.tgz","fileCount":19,"unpackedSize":217230,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqyT/mxuUZzbvUgzlxvtT87gl5brvRUJsJkjALt8qYcAiEAu03Zevkm85RU/pgguNydFvYyXY9L1TPmpJKDuJ93lnU="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2110-1286.0.ae630a7_1685964275410_0.45056443189131756"},"_hasShrinkwrap":false},"1.0.0-canary-2110-1288.0.7213784":{"name":"@bodiless/youtube","version":"1.0.0-canary-2110-1288.0.7213784","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2110-1288.0.7213784","@bodiless/components":"1.0.0-canary-2110-1288.0.7213784","@bodiless/core":"1.0.0-canary-2110-1288.0.7213784","@bodiless/fclasses":"1.0.0-canary-2110-1288.0.7213784","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"72137848518781cc8ffa02c2cd58aa11ed0b0d74","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2110-1288.0.7213784","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-0FFLMsgCN5l85MiyQTRu1riQAb6pD0QFYbBJEWve3LuubGs0W+hMCAtS4x1JIuEzu6WnfORED4Pqy6O7FMDSuw==","shasum":"986a86f693350b8c70950467dbbd33dc3cf586ef","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2110-1288.0.7213784.tgz","fileCount":19,"unpackedSize":217230,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwatjFADk5vs5bRTURUrhwE+UH7a6mvLaw6RzVY0eDqAiEAvsExWsY8AwLxIfOsY59ZBaO+ucJ3baS3JfUi26fIpXw="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2110-1288.0.7213784_1685968114565_0.3010210468741581"},"_hasShrinkwrap":false},"1.0.0-canary-2110-1292.0.5240c8b":{"name":"@bodiless/youtube","version":"1.0.0-canary-2110-1292.0.5240c8b","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2110-1292.0.5240c8b","@bodiless/components":"1.0.0-canary-2110-1292.0.5240c8b","@bodiless/core":"1.0.0-canary-2110-1292.0.5240c8b","@bodiless/fclasses":"1.0.0-canary-2110-1292.0.5240c8b","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"5240c8badb1546725929ceeae0df1617ee0c9e0d","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2110-1292.0.5240c8b","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-kr3yNHAAjMp1YKcvomaDJm6wAt2FHnpD28mceh9A61nmGaTErwHxSsj4SZ3Jf8wICd1dUOy/xzFK+bk/K6f9OA==","shasum":"7a7b40c0e4028527ac5b2d7aaf977dd1c8fc1a4c","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2110-1292.0.5240c8b.tgz","fileCount":19,"unpackedSize":217230,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHggO094OFSyUXxeXDU67+hg6IJqVsySXpQ7o4erGFgLAiAfW8EHr83VQJ3JBJF7Tv8lbV+rLcA3w8HK0pBWzB+Mdg=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2110-1292.0.5240c8b_1685991064125_0.15022591381223904"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1293.0.7035f98":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1293.0.7035f98","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1293.0.7035f98","@bodiless/components":"1.0.0-canary-2055-1293.0.7035f98","@bodiless/core":"1.0.0-canary-2055-1293.0.7035f98","@bodiless/fclasses":"1.0.0-canary-2055-1293.0.7035f98","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"7035f985d31b494ea712d8a90b7a0465fbd06a8c","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1293.0.7035f98","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-tqli0TszAWUXPAyIufiLV3enkJOz9IG9pgGChzo0Ft5y6P8JyGQVXvO55FCmrYdomnze7eAQ09GpTECyON0+DA==","shasum":"5b5f0b8d6b8f4a2e411e188f0c8045092f5e1565","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1293.0.7035f98.tgz","fileCount":19,"unpackedSize":217231,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjFve/CJCnM8m9Qv9wfIaPwlQC/FZtI7cx27cbWTPNfAiEAyov/64/V+d6ub/XdD+ftQshLOxRMw86yAsS8SikOyl0="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1293.0.7035f98_1685998268473_0.6387755700681359"},"_hasShrinkwrap":false},"1.0.0-rc.40":{"name":"@bodiless/youtube","version":"1.0.0-rc.40","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.40","@bodiless/components":"^1.0.0-rc.40","@bodiless/core":"^1.0.0-rc.40","@bodiless/fclasses":"^1.0.0-rc.40","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"2f7abb1030a0022d6aa4994b61a7f81296e57639","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.40","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-lmqHHSoCk5ZrzxBOGthaxq3D8LZIuE7dOIO3XsQtqSQrsHCex4USuYk+hvbpSKd4EzH2YrsgbkMcrI0tQbU9Bw==","shasum":"a5d3e9efca8761145a9bbc26678940b9ee06f1e4","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.40.tgz","fileCount":19,"unpackedSize":217129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+sVWR8i5Jx8ewBTF4tsItcWJnuAdnKMPzSdDYpQGMsgIgfuPfLCb+9aN5rfoE9ezDRWf0k2zaqVkWgZJyQP/1qBI="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.40_1686175821693_0.3516426096121801"},"_hasShrinkwrap":false},"1.0.0-rc.41":{"name":"@bodiless/youtube","version":"1.0.0-rc.41","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.41","@bodiless/components":"^1.0.0-rc.41","@bodiless/core":"^1.0.0-rc.41","@bodiless/fclasses":"^1.0.0-rc.41","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"35fb3a4214b2259047cd465df6f5b66d807122df","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.41","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-LuBaZ+b4+mlyHu1/H9UcHwQfp+9FlX8QYy3tTactnf1b8+CGl/ygWMMpm9nr5uBtnSUnVTZuv9d0wGsZqdu5fQ==","shasum":"fe3339d0201d193ab45c6156bbef9e67b4b46b39","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.41.tgz","fileCount":19,"unpackedSize":217129,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEEqOMSVP86ueqy6mwa3tVCbjGbDkELByPQB0XreOkDvAiBVbYKJEYCPT2U1VPvZ0R/pBWwaRGAHPgnFCSx6thdINg=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.41_1686183602430_0.12634770087932368"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1406.0.c6eba2c":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1406.0.c6eba2c","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1406.0.c6eba2c","@bodiless/components":"1.0.0-canary-2055-1406.0.c6eba2c","@bodiless/core":"1.0.0-canary-2055-1406.0.c6eba2c","@bodiless/fclasses":"1.0.0-canary-2055-1406.0.c6eba2c","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"c6eba2c7aeead12557270167dea722e92dcb6f1e","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1406.0.c6eba2c","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-LALUDqDzlfBZMbBFFWf3WnJNpEDZ/mzvpmZIfVwu/vIu1ykPlolUm1ADHcoHN+OAKCTs51nYM/HsJkVNbv3m8g==","shasum":"d253345912a31d6acfb2bf1d0b291dc7226a010d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1406.0.c6eba2c.tgz","fileCount":19,"unpackedSize":217248,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0trcmkHxlngZGAlnQUj7vkKhPixEAW+4K+eeP5+ozgAiBDubgB6QkjRkdyGRc7B0+j6qFK5Xz0lVUEWvvIiG8B3A=="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1406.0.c6eba2c_1686770629427_0.014292195354547399"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1407.0.c92a369":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1407.0.c92a369","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1407.0.c92a369","@bodiless/components":"1.0.0-canary-2055-1407.0.c92a369","@bodiless/core":"1.0.0-canary-2055-1407.0.c92a369","@bodiless/fclasses":"1.0.0-canary-2055-1407.0.c92a369","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"c92a3696d82224e0220440a43dc8b678c59f6d8b","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1407.0.c92a369","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-eb6FCub3J9l/o9wyl2Qu7QtjMuDyDlsQysrplaeqDmDHVv41sn/24XIQNkCqsOnNE+uxar/U0dVlMVTWhsVvFA==","shasum":"6f4bf8ed1ed3b725597903c01da878c1d374e12d","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1407.0.c92a369.tgz","fileCount":19,"unpackedSize":217248,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBscqd+Pgjff5OEkF3ZdujOY+ktW8Fp5VTw9FblZdC9jAiEAk4EYjel+PKQn6kEOzE1v+yZdUSKJYVp0p4KO5D1TKg8="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1407.0.c92a369_1686775615577_0.503461899229235"},"_hasShrinkwrap":false},"1.0.0-canary-2055-1417.0.6188e93":{"name":"@bodiless/youtube","version":"1.0.0-canary-2055-1417.0.6188e93","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"1.0.0-canary-2055-1417.0.6188e93","@bodiless/components":"1.0.0-canary-2055-1417.0.6188e93","@bodiless/core":"1.0.0-canary-2055-1417.0.6188e93","@bodiless/fclasses":"1.0.0-canary-2055-1417.0.6188e93","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"6188e93bdbb33bfc9f58e353d8a442c25951aa38","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-canary-2055-1417.0.6188e93","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-q76EkeUAAvCCaUHPV0o8GU0rIY3rLbaY1LUFKFb5WdKte5xn6Yzy3VM0H9rjXdC2im/2fwwsqm18+oDELXbmmA==","shasum":"68470050193695a10528e859f7135c30f407b210","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-canary-2055-1417.0.6188e93.tgz","fileCount":19,"unpackedSize":217248,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDU5itOKezarmUuQu77YUcg8e2zp4wMpAp+GUhqxkZdBAiEAsMtvsoZntgJzqXsb47KD9FYQemgYqo8b5xacrXNPxVk="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-canary-2055-1417.0.6188e93_1686836140407_0.0835182805187955"},"_hasShrinkwrap":false},"1.0.0-rc.42":{"name":"@bodiless/youtube","version":"1.0.0-rc.42","description":"Bodiless YouTube component.","author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"license":"Apache-2.0","main":"lib/index.js","sideEffects":false,"typings":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"publishConfig":{"access":"public"},"scripts":{"build":"run-p copy build:lib","build:lib":"tsc -p ./tsconfig.json","build:watch":"npm run build:lib -- --watch","build:api-doc":"typedoc --options ../../typedoc.js --out doc/api ./src","clean":"rimraf \"lib/*\" && rimraf tsconfig.tsbuildinfo && rimraf \"doc/api\"","copy":"copyfiles -u 1 \"./src/**/*.{css,png}\" \"./lib/\""},"dependencies":{"@bodiless/cli":"^1.0.0-rc.42","@bodiless/components":"^1.0.0-rc.42","@bodiless/core":"^1.0.0-rc.42","@bodiless/fclasses":"^1.0.0-rc.42","lodash":"^4.17.19"},"peerDependencies":{"react":"^18.2.0"},"gitHead":"a47b678d4bfb607afc50a7a722d8025c06877782","readme":"# YouTube Component\n\nThe YouTube Component can be used to place a [YouTube video](https://www.youtube.com/\n':target=_blank') on a page via the BodilessJS Edit Interface. The YouTube Component is responsive\nand features a 16:9 aspect ratio by default.\n\n## Content Editor Details\n\nTo add a YouTube Component to your site:\n\n01. In [Edit Mode](/ContentEditorUserGuide/#edit-mode), select the YouTube Component from the\n Component Library. \n \n\n01. Click on your newly added YouTube Component, and, within its context menu, under \"YouTube,\"\n click **Settings**. \n \n\n01. Enter the target YouTube URL, and click the checkmark (or press Enter) to confirm.\n\n \n \n Note: Please note the following accepted URL formats:\n\n * **Share** (e.g., https://youtu.be/_LBdqpscwi0)\n * **Watch** (e.g., https://www.youtube.com/watch?v=_LBdqpscwi0)\n * **Embed** (e.g., https://www.youtube.com/embed/_LBdqpscwi0)\n\n
\n\n01. Resize or reposition the YouTube Component using the Flow Container controls.\n\n## Site Builder Details\n\nThe YouTube Component can be used to place a YouTube video on a page via the BodilessJS Edit\nInterface.\n\n?> **Note:** The [Embed Component](/Components/Embed) must be activated on your site for the YouTube\nComponent to work.\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\n\n```\n\nYou can also use the HOC version of this, which can then be applied to other components. But the\nunderlining component must accept the same props as an `iframe` tag. Simply pass the node key to the\n`asBodilessYouTube` function and then use the returned HOC:\n\n```jsx\nimport { CustomYouTube } from 'my-library';\nimport { asBodilessYouTube } from '@bodiless/youtube';\n\nconst YouTube = asBodilessYouTube('customYouTube')(CustomYouTube);\n\n\n```\n\nYou can configure YouTube player settings leveraging the `withYouTubePlayerSettings` HOC. For\nexample, to configure AutoPlay for the YouTube component:\n\n```jsx\nimport { YouTube } from '@bodiless/youtube';\n\nconst AutoPlayYouTube = withYouTubePlayerSettings({\n autoplay: true,\n mute: true,\n})(YouTube);\n\n\n```\n\n### Props\n\n| Name | Default | Description |\n| ---------------- | ----------- | ----------------------------------------------------------------------------------------- |\n| `nodeKey` | `undefined` | Identifies where the component data will be stored. |\n| `playerSettings` | `undefined` | YouTube embed player settings. Check the `YouTubePlayerSettings` type from `Youtube.tsx`. |\n\nIn addition, you can pass `HTMLIFrameElement` props (`id`, `src`, `width`, etc.). Check the\n`HTMLIFrameElement` type for more details.\n\n### `playerSettings` Parameters\n\nThe YouTube Component utilizes an API that allows you to change the properties/parameters listed\nbelow. You can use `defaultPlayerSettings` to set parameters that are commonly used together. For\nmore details on each individual parameter, see: [YouTube Embedded Players and Player Parameters :\nSupported Parameters | Google\nDevelopers](https://developers.google.com/youtube/player_parameters#Parameters ':target=_blank').\n\n| Parameters | Suggested Default |\n| ---------------- | ----------------- |\n| `autoplay` | `0` |\n| `cc_lang_pref` | No default |\n| `cc_load_policy` | `0` |\n| `controls` | `1` |\n| `loop` | `0` |\n| `enablejsapi` | `1` |\n| `modestbranding` | `1` |\n| `origin` | Canonical URL |\n| `rel` | `0` |\n| `mute` | |\n| `version` | |\n| `playlist` | |\n\nE.g.: Responsive YouTube with 16:9 ratio with custom language preferences:\n\n```js\nconst withCustomLangPref = flowRight(\n withYouTubePlayerSettings({\n ...defaultPlayerSettings,\n cc_lang_pref: 'de',\n cc_load_policy: 1,\n }),\n addProps({\n src: 'https://www.youtube.com/embed/9No-FiEInLA',\n }),\n);\n\nconst YouTubeWithCustomLangPref = withDesign({\n Item: withCustomLangPref,\n})(DefaultReponsive16By9YouTube);\n```\n\n### Usage\n\n```jsx\n\n```\n\n## Architectural Details\n\nThe YouTube Component renders the following code:\n\n```html\n\n```\n\n?> **Note:** There are optional parameters on the `src` that are configurable.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","_id":"@bodiless/youtube@1.0.0-rc.42","_nodeVersion":"18.16.0","_npmVersion":"lerna/5.6.2/node@v18.16.0+x64 (linux)","dist":{"integrity":"sha512-oH1TV3FrUDL/SoDIlRquDbdxN5KChiPrEi2NJe/JvxirHj3NVyvROFljuykKoWbTBBgKHZYsSXZ3b+E8Pbxb3w==","shasum":"8bf7481c1fec5280726ce934798402183f2984f5","tarball":"https://registry.npmjs.org/@bodiless/youtube/-/youtube-1.0.0-rc.42.tgz","fileCount":19,"unpackedSize":217147,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDekMv8tVhCAzQqIOePTQuhv14ZyCc9BFa75P/QDWjkVAiEA/chYPGMT8gcJ+4gk8fR0Q/RwkePvi68Hk+U2BblyzYY="}]},"_npmUser":{"name":"npmbodiless","email":"npmbodiless@gmail.com"},"directories":{},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube_1.0.0-rc.42_1686854561629_0.2314434108411858"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-28T17:17:14.044Z","0.2.0":"2021-04-28T17:17:14.425Z","modified":"2023-06-15T18:42:42.111Z","0.2.1":"2021-05-12T15:28:05.073Z","0.2.2":"2021-06-08T16:26:58.973Z","0.2.3":"2021-06-14T14:36:01.877Z","0.2.4":"2021-07-02T15:13:20.116Z","0.2.5":"2021-07-16T15:10:52.800Z","0.2.6":"2021-07-20T15:37:48.075Z","0.2.7":"2021-07-20T20:25:21.823Z","0.2.8":"2021-07-28T15:30:08.329Z","0.2.9":"2021-08-20T18:57:06.138Z","0.2.10":"2021-10-01T22:49:48.358Z","0.3.0":"2021-11-01T18:20:19.842Z","0.3.1":"2021-11-15T13:17:05.796Z","0.3.2-ks-canary.27":"2021-12-01T19:04:46.186Z","0.3.2-ks-canary.29":"2021-12-01T19:40:41.258Z","0.3.2-ks-canary.30":"2021-12-01T21:19:18.331Z","0.3.2":"2021-12-13T12:56:09.743Z","0.3.3":"2021-12-15T21:47:11.473Z","0.3.4":"2021-12-16T17:36:26.444Z","0.3.5":"2021-12-29T12:54:33.407Z","0.3.6":"2022-01-24T15:41:39.417Z","0.3.7-ks-canary.62":"2022-02-03T01:44:40.294Z","0.3.7":"2022-02-16T20:06:40.527Z","0.3.8-upgrade-deps.171":"2022-02-17T08:56:55.703Z","0.3.8-upgrade-deps.173":"2022-02-17T16:00:09.179Z","1.0.0-beta.0":"2022-03-09T21:40:08.532Z","1.0.0-beta.1":"2022-03-14T19:45:06.124Z","1.0.0-beta.2":"2022-04-05T17:48:29.550Z","1.0.0-beta.3":"2022-04-11T20:26:41.611Z","1.0.0-beta.4":"2022-04-12T18:15:54.861Z","1.0.0-beta.5":"2022-04-13T12:55:27.570Z","1.0.0-beta.6":"2022-04-13T22:06:27.674Z","1.0.0-beta.7":"2022-04-13T23:59:42.154Z","1.0.0-beta.8":"2022-04-21T15:37:56.291Z","1.0.0-beta.9":"2022-04-21T16:27:20.988Z","1.0.0-canary-1553-8.0":"2022-04-25T19:45:29.601Z","1.0.0-canary-1553-7.0":"2022-04-25T19:46:05.331Z","1.0.0-canary-1636-9.0":"2022-04-25T20:58:32.124Z","1.0.0-canary-1553-10.0":"2022-04-26T07:23:17.264Z","1.0.0-canary-1487-11.0":"2022-04-26T13:12:03.640Z","1.0.0-canary-1487-13.0":"2022-04-26T13:20:18.927Z","1.0.0-canary-1487-12.0":"2022-04-26T13:20:45.743Z","1.0.0-canary-1553-14.0":"2022-04-26T13:26:13.296Z","1.0.0-canary-1487-15.0":"2022-04-26T13:59:56.280Z","1.0.0-canary-1553-16.0":"2022-04-26T14:02:40.336Z","1.0.0-canary-1641-17.0":"2022-04-26T15:57:45.504Z","1.0.0-canary-1553-18.0":"2022-04-26T16:03:15.504Z","1.0.0-canary-1553-19.0":"2022-04-26T17:11:01.144Z","1.0.0-beta.10":"2022-04-26T17:46:31.352Z","1.0.0-canary-1553-21.0":"2022-04-26T18:59:55.933Z","1.0.0-canary-1500-22.0":"2022-04-26T19:58:26.396Z","1.0.0-canary-1645-24.0":"2022-04-26T21:02:07.119Z","1.0.0-canary-1500-23.0":"2022-04-26T21:03:01.178Z","1.0.0-canary-1646-25.0":"2022-04-26T21:47:52.570Z","1.0.0-canary-1647-26.0":"2022-04-26T22:01:05.100Z","1.0.0-canary-1648-27.0":"2022-04-26T22:07:23.923Z","1.0.0-canary-1598-28.0":"2022-04-26T23:00:14.078Z","1.0.0-canary-1650-29.0":"2022-04-27T11:57:11.673Z","1.0.0-canary-1635-30.0":"2022-04-27T13:44:50.697Z","1.0.0-canary-1652-31.0":"2022-04-27T14:04:21.455Z","1.0.0-canary-1553-33.0":"2022-04-27T14:37:58.393Z","1.0.0-canary-1553-34.0":"2022-04-28T09:39:21.795Z","1.0.0-canary-1553-35.0":"2022-04-28T11:47:27.613Z","1.0.0-canary-1661-36.0":"2022-04-28T14:08:15.809Z","1.0.0-canary-1553-37.0":"2022-04-28T14:11:01.835Z","1.0.0-canary-1553-39.0":"2022-04-28T15:56:58.255Z","1.0.0-canary-1553-38.0":"2022-04-28T15:57:06.892Z","1.0.0-canary-1553-40.0":"2022-04-28T18:43:39.557Z","1.0.0-canary-1667-42.0":"2022-04-28T19:51:35.939Z","1.0.0-canary-1667-41.0":"2022-04-28T19:52:59.355Z","1.0.0-beta.11":"2022-04-28T20:34:58.587Z","1.0.0-canary-1553-43.0":"2022-04-28T22:28:26.327Z","1.0.0-canary-1553-44.0":"2022-04-29T14:11:28.377Z","1.0.0-canary-1497-45.0":"2022-04-29T16:19:24.215Z","1.0.0-canary-1553-46.0":"2022-04-29T17:51:46.381Z","1.0.0-canary-1553-47.0":"2022-05-02T13:13:30.813Z","1.0.0-canary-1553-48.0":"2022-05-02T16:40:23.491Z","1.0.0-beta.12":"2022-05-02T17:20:33.754Z","1.0.0-canary-1553-49.0":"2022-05-02T17:52:03.010Z","1.0.0-canary-1679-50.0":"2022-05-03T13:30:03.878Z","1.0.0-canary-1553-51.0":"2022-05-03T17:52:22.229Z","1.0.0-canary-1553-52.0":"2022-05-04T13:32:37.293Z","1.0.0-canary-1679-53.0":"2022-05-04T14:17:39.287Z","1.0.0-canary-1553-54.0":"2022-05-04T19:47:10.924Z","1.0.0-canary-1682-55.0":"2022-05-04T21:58:53.524Z","1.0.0-canary-1683-56.0":"2022-05-04T23:07:31.131Z","1.0.0-canary-1667-57.0":"2022-05-05T09:58:03.532Z","1.0.0-beta.13":"2022-05-05T10:08:12.432Z","1.0.0-canary-1680-58.0":"2022-05-05T12:41:15.190Z","1.0.0-canary-1635-59.0":"2022-05-05T12:47:28.937Z","1.0.0-canary-1595-60.0":"2022-05-05T12:49:31.883Z","1.0.0-canary-1685-61.0":"2022-05-05T13:42:50.049Z","1.0.0-canary-1671-62.0":"2022-05-05T14:18:35.385Z","1.0.0-canary-1500-63.0":"2022-05-05T14:22:16.501Z","1.0.0-canary-1680-64.0":"2022-05-05T16:16:48.987Z","1.0.0-beta.14":"2022-05-05T18:07:45.825Z","1.0.0-canary-1682-65.0":"2022-05-05T18:18:19.779Z","1.0.0-canary-1500-66.0":"2022-05-05T20:17:37.724Z","1.0.0-canary-1730-67.0":"2022-05-06T13:42:41.241Z","1.0.0-canary-1730-68.0":"2022-05-06T14:35:22.705Z","1.0.0-canary-1635-69.0":"2022-05-06T15:50:52.897Z","1.0.0-canary-1731-70.0":"2022-05-06T16:18:21.735Z","1.0.0-canary-1733-71.0":"2022-05-07T18:49:23.664Z","1.0.0-canary-1628-72.0":"2022-05-09T13:17:43.521Z","1.0.0-canary-1595-73.0":"2022-05-09T13:27:41.196Z","1.0.0-canary-1683-74.0":"2022-05-09T14:16:44.309Z","1.0.0-canary-1734-75.0":"2022-05-09T14:21:24.334Z","1.0.0-canary-1735-77.0":"2022-05-09T15:21:08.376Z","1.0.0-canary-1735-78.0":"2022-05-09T17:36:43.308Z","1.0.0-canary-1500-79.0":"2022-05-09T18:40:35.987Z","1.0.0-canary-1733-80.0":"2022-05-09T19:03:47.266Z","1.0.0-canary-1595-81.0":"2022-05-10T07:18:55.281Z","1.0.0-canary-1595-82.0":"2022-05-10T07:26:11.012Z","1.0.0-canary-1734-83.0":"2022-05-10T08:17:39.881Z","1.0.0-canary-1771-84.0":"2022-05-10T13:00:14.333Z","1.0.0-canary-1730-85.0":"2022-05-10T13:02:36.920Z","1.0.0-canary-1772-86.0":"2022-05-10T14:25:50.145Z","1.0.0-canary-1772-87.0":"2022-05-10T14:36:24.588Z","1.0.0-beta.15":"2022-05-10T14:50:13.318Z","1.0.0-canary-1685-88.0":"2022-05-10T15:04:59.174Z","1.0.0-canary-1730-89.0":"2022-05-10T15:21:15.159Z","1.0.0-canary-1774-91.0":"2022-05-10T15:29:09.845Z","1.0.0-canary-1773-92.0":"2022-05-10T15:29:33.298Z","1.0.0-canary-1774-93.0":"2022-05-10T15:32:00.679Z","1.0.0-canary-1773-90.0":"2022-05-10T15:33:10.234Z","1.0.0-canary-1733-94.0":"2022-05-10T15:59:56.222Z","1.0.0-canary-1775-95.0":"2022-05-10T16:01:15.997Z","1.0.0-canary-1776-96.0":"2022-05-10T16:17:04.972Z","1.0.0-canary-1776-97.0":"2022-05-10T16:23:02.804Z","1.0.0-canary-1774-98.0":"2022-05-10T17:14:31.115Z","1.0.0-canary-1774-99.0":"2022-05-10T17:39:15.267Z","1.0.0-canary-1500-100.0":"2022-05-10T17:58:54.758Z","1.0.0-canary-1778-101.0":"2022-05-10T20:41:19.872Z","1.0.0-canary-1628-103.0":"2022-05-10T20:42:16.386Z","1.0.0-canary-1778-102.0":"2022-05-10T20:43:59.818Z","1.0.0-canary-1595-104.0":"2022-05-10T21:00:24.102Z","1.0.0-canary-1778-105.0":"2022-05-10T21:05:41.710Z","1.0.0-canary-1683-106.0":"2022-05-10T21:23:27.854Z","1.0.0-canary-1778-107.0":"2022-05-10T22:26:07.289Z","1.0.0-canary-1778-108.0":"2022-05-10T22:32:47.216Z","1.0.0-canary-1595-109.0":"2022-05-11T07:02:01.027Z","1.0.0-canary-1671-110.0":"2022-05-11T10:35:38.391Z","1.0.0-beta.16":"2022-05-11T10:59:42.735Z","1.0.0-canary-1776-111.0":"2022-05-11T11:46:47.455Z","1.0.0-canary-1730-112.0":"2022-05-11T12:25:59.797Z","1.0.0-canary-1635-113.0":"2022-05-11T12:26:48.160Z","1.0.0-canary-1487-114.0":"2022-05-11T12:33:14.721Z","1.0.0-canary-1635-115.0":"2022-05-11T12:58:29.015Z","1.0.0-canary-1683-116.0":"2022-05-11T13:02:31.032Z","1.0.0-canary-1635-117.0":"2022-05-11T13:05:43.482Z","1.0.0-canary-1774-118.0":"2022-05-11T13:18:41.761Z","1.0.0-canary-1671-119.0":"2022-05-11T13:30:26.766Z","1.0.0-canary-1595-120.0":"2022-05-11T14:08:13.250Z","1.0.0-canary-1500-121.0":"2022-05-11T14:43:54.552Z","1.0.0-beta.17":"2022-05-11T15:35:02.510Z","1.0.0-canary-1685-122.0":"2022-05-11T16:17:20.827Z","1.0.0-beta.18":"2022-05-11T16:38:39.038Z","1.0.0-canary-1778-123.0":"2022-05-11T17:02:45.541Z","1.0.0-canary-1730-124.0":"2022-05-11T17:22:32.943Z","1.0.0-canary-1778-125.0":"2022-05-11T17:25:58.553Z","1.0.0-canary-1774-126.0":"2022-05-11T18:05:09.926Z","1.0.0-canary-1774-127.0":"2022-05-11T18:06:34.424Z","1.0.0-canary-1778-128.0":"2022-05-11T18:58:47.987Z","1.0.0-canary-1778-129.0":"2022-05-11T20:16:59.780Z","1.0.0-canary-1778-130.0":"2022-05-11T20:38:01.018Z","1.0.0-canary-1778-131.0":"2022-05-11T20:53:59.985Z","1.0.0-canary-1628-132.0":"2022-05-11T23:59:15.997Z","1.0.0-canary-1628-133.0":"2022-05-12T00:44:32.476Z","1.0.0-canary-1628-134.0":"2022-05-12T00:46:18.040Z","1.0.0-canary-1671-135.0":"2022-05-12T11:47:20.583Z","1.0.0-canary-1482-136.0":"2022-05-12T12:11:33.175Z","1.0.0-canary-1482-137.0":"2022-05-12T12:17:05.656Z","1.0.0-canary-1671-138.0":"2022-05-12T13:51:14.046Z","1.0.0-canary-1635-140.0":"2022-05-12T13:58:15.214Z","1.0.0-canary-1635-139.0":"2022-05-12T14:00:29.359Z","1.0.0-canary-1683-141.0":"2022-05-12T14:01:47.013Z","1.0.0-canary-1628-142.0":"2022-05-12T14:04:54.936Z","1.0.0-canary-1635-143.0":"2022-05-12T14:09:35.840Z","1.0.0-canary-1671-144.0":"2022-05-12T14:37:53.941Z","1.0.0-canary-1628-145.0":"2022-05-12T15:14:47.614Z","1.0.0-canary-1775-146.0":"2022-05-12T15:19:25.804Z","1.0.0-canary-1779-147.0":"2022-05-12T16:09:01.378Z","1.0.0-canary-1780-148.0":"2022-05-12T16:14:28.023Z","1.0.0-canary-1730-149.0":"2022-05-12T16:22:28.216Z","1.0.0-canary-1500-150.0":"2022-05-12T19:47:31.763Z","1.0.0-canary-1730-151.0":"2022-05-12T20:32:54.000Z","1.0.0-canary-1482-152.0":"2022-05-12T21:01:21.169Z","1.0.0-canary-1628-153.0":"2022-05-12T21:32:07.348Z","1.0.0-canary-1778-154.0":"2022-05-12T22:39:10.196Z","1.0.0-canary-1778-155.0":"2022-05-13T00:29:01.735Z","1.0.0-canary-1781-156.0":"2022-05-13T00:30:42.572Z","1.0.0-canary-1500-157.0":"2022-05-13T00:39:22.696Z","1.0.0-canary-1778-159.0":"2022-05-13T00:40:58.074Z","1.0.0-canary-1778-158.0":"2022-05-13T00:41:30.669Z","1.0.0-canary-1782-160.0":"2022-05-13T07:35:02.037Z","1.0.0-canary-1628-161.0":"2022-05-13T13:09:51.973Z","1.0.0-canary-1628-162.0":"2022-05-13T13:27:23.731Z","1.0.0-canary-1776-163.0":"2022-05-13T13:52:02.193Z","1.0.0-canary-1781-164.0":"2022-05-13T14:15:19.634Z","1.0.0-canary-1628-165.0":"2022-05-13T14:18:34.088Z","1.0.0-canary-1781-166.0":"2022-05-13T14:25:38.392Z","1.0.0-canary-1782-167.0":"2022-05-13T14:32:25.610Z","1.0.0-canary-1730-168.0":"2022-05-13T15:23:56.729Z","1.0.0-canary-1775-169.0":"2022-05-13T15:30:08.724Z","1.0.0-canary-1779-170.0":"2022-05-13T16:03:15.961Z","1.0.0-canary-1780-171.0":"2022-05-13T16:03:24.252Z","1.0.0-canary-1730-172.0":"2022-05-13T16:34:17.345Z","1.0.0-canary-1628-174.0":"2022-05-13T21:15:51.208Z","1.0.0-canary-1628-175.0":"2022-05-13T21:33:23.117Z","1.0.0-canary-1781-176.0":"2022-05-16T03:49:54.298Z","1.0.0-canary-1783-177.0":"2022-05-16T07:54:30.502Z","1.0.0-canary-1784-178.0":"2022-05-16T08:50:08.313Z","1.0.0-canary-1784-179.0":"2022-05-16T10:09:04.105Z","1.0.0-canary-1785-180.0":"2022-05-16T11:42:24.660Z","1.0.0-canary-1783-181.0":"2022-05-16T11:58:50.429Z","1.0.0-canary-1785-182.0":"2022-05-16T12:42:15.522Z","1.0.0-canary-1785-183.0":"2022-05-16T13:04:05.948Z","1.0.0-canary-1500-184.0":"2022-05-16T13:33:24.490Z","1.0.0-canary-1778-185.0":"2022-05-16T14:17:04.566Z","1.0.0-canary-1778-186.0":"2022-05-16T14:32:14.203Z","1.0.0-canary-1775-187.0":"2022-05-16T15:19:11.504Z","1.0.0-canary-1781-188.0":"2022-05-16T16:34:17.962Z","1.0.0-canary-1786-189.0":"2022-05-16T19:49:19.642Z","1.0.0-canary-1787-190.0":"2022-05-16T21:18:15.098Z","1.0.0-canary-1787-191.0":"2022-05-16T21:25:35.914Z","1.0.0-canary-1788-192.0":"2022-05-16T21:39:58.360Z","1.0.0-canary-1788-193.0":"2022-05-16T21:44:24.628Z","1.0.0-canary-1788-194.0":"2022-05-16T21:59:07.719Z","1.0.0-canary-1647-196.0":"2022-05-16T22:43:51.234Z","1.0.0-canary-1647-197.0":"2022-05-16T23:55:15.621Z","1.0.0-canary-1487-198.0":"2022-05-17T12:05:57.881Z","1.0.0-canary-1778-199.0":"2022-05-17T12:47:57.840Z","1.0.0-canary-1778-200.0":"2022-05-17T12:52:56.234Z","1.0.0-canary-1487-201.0":"2022-05-17T13:12:16.010Z","1.0.0-canary-1487-202.0":"2022-05-17T13:26:44.626Z","1.0.0-canary-1635-203.0":"2022-05-17T13:29:15.316Z","1.0.0-canary-1785-204.0":"2022-05-17T13:59:14.384Z","1.0.0-canary-1785-205.0":"2022-05-17T14:02:49.376Z","1.0.0-canary-1788-206.0":"2022-05-17T18:21:51.770Z","1.0.0-canary-1786-208.0":"2022-05-17T18:30:56.339Z","1.0.0-canary-1781-209.0":"2022-05-17T18:31:23.768Z","1.0.0-canary-1787-207.0":"2022-05-17T18:32:01.562Z","1.0.0-canary-1647-211.0":"2022-05-17T19:35:36.030Z","1.0.0-canary-1790-212.0":"2022-05-17T20:29:49.055Z","1.0.0-canary-1790-213.0":"2022-05-17T21:09:54.701Z","1.0.0-canary-1647-214.0":"2022-05-17T21:15:40.611Z","1.0.0-canary-1647-215.0":"2022-05-17T21:26:04.214Z","1.0.0-canary-1784-216.0":"2022-05-18T09:40:52.972Z","1.0.0-canary-1784-217.0":"2022-05-18T09:43:14.521Z","1.0.0-canary-1487-218.0":"2022-05-18T12:02:17.958Z","1.0.0-canary-1792-219.0":"2022-05-18T13:02:22.414Z","1.0.0-canary-1482-220.0":"2022-05-18T13:27:23.291Z","1.0.0-canary-1788-221.0":"2022-05-18T13:45:59.713Z","1.0.0-canary-1482-222.0":"2022-05-18T13:47:36.020Z","1.0.0-canary-1628-223.0":"2022-05-18T13:48:43.223Z","1.0.0-canary-1784-224.0":"2022-05-18T14:07:07.511Z","1.0.0-canary-1792-225.0":"2022-05-18T14:28:03.563Z","1.0.0-canary-1647-226.0":"2022-05-18T14:57:40.838Z","1.0.0-canary-1787-227.0":"2022-05-18T14:58:50.906Z","1.0.0-canary-1647-228.0":"2022-05-18T16:25:51.349Z","1.0.0-canary-1529-229.0":"2022-05-18T17:31:25.260Z","1.0.0-canary-1628-230.0":"2022-05-18T18:14:09.115Z","1.0.0-canary-1647-231.0":"2022-05-18T19:15:16.090Z","1.0.0-canary-1784-232.0":"2022-05-18T19:41:19.634Z","1.0.0-canary-1790-233.0":"2022-05-18T21:11:20.636Z","1.0.0-canary-1790-234.0":"2022-05-18T21:26:11.685Z","1.0.0-canary-1781-235.0":"2022-05-18T22:26:52.495Z","1.0.0-canary-1683-236.0":"2022-05-19T08:20:19.316Z","1.0.0-canary-1794-237.0":"2022-05-19T10:09:07.862Z","1.0.0-canary-1790-238.0":"2022-05-19T12:57:54.265Z","1.0.0-canary-1778-239.0":"2022-05-19T13:11:21.118Z","1.0.0-canary-1795-241.0":"2022-05-19T13:20:39.728Z","1.0.0-canary-1795-240.0":"2022-05-19T13:21:51.844Z","1.0.0-canary-1790-242.0":"2022-05-19T13:28:21.540Z","1.0.0-canary-1771-243.0":"2022-05-19T16:10:42.577Z","1.0.0-canary-1683-244.0":"2022-05-19T16:30:51.955Z","1.0.0-canary-1785-245.0":"2022-05-19T19:34:20.458Z","1.0.0-canary-1790-246.0":"2022-05-19T19:37:33.120Z","1.0.0-canary-1785-248.0":"2022-05-19T19:48:10.471Z","1.0.0-canary-1790-247.0":"2022-05-19T19:49:15.797Z","1.0.0-canary-1628-249.0":"2022-05-19T20:13:17.246Z","1.0.0-canary-1792-250.0":"2022-05-19T20:34:00.730Z","1.0.0-canary-1792-251.0":"2022-05-19T20:49:26.216Z","1.0.0-canary-1787-252.0":"2022-05-19T23:01:30.969Z","1.0.0-canary-1787-253.0":"2022-05-19T23:04:57.135Z","1.0.0-canary-1487-254.0":"2022-05-20T08:20:12.694Z","1.0.0-canary-1487-255.0":"2022-05-20T08:41:24.349Z","1.0.0-canary-1628-256.0":"2022-05-20T12:34:49.845Z","1.0.0-canary-1482-257.0":"2022-05-20T12:52:23.100Z","1.0.0-canary-1778-258.0":"2022-05-20T13:13:46.048Z","1.0.0-canary-1771-259.0":"2022-05-20T13:14:43.870Z","1.0.0-canary-1784-260.0":"2022-05-20T13:26:33.396Z","1.0.0-canary-1487-261.0":"2022-05-20T13:39:50.197Z","1.0.0-canary-1487-262.0":"2022-05-20T13:45:04.377Z","1.0.0-canary-1787-263.0":"2022-05-20T14:51:40.781Z","1.0.0-rc.1":"2022-05-20T15:33:00.966Z","1.0.0-canary-1797-264.0":"2022-05-20T16:09:21.791Z","1.0.0-canary-1482-265.0":"2022-05-20T17:13:11.163Z","1.0.0-canary-1482-266.0":"2022-05-20T17:23:35.650Z","1.0.0-canary-1798-267.0":"2022-05-20T17:48:33.196Z","1.0.0-canary-1792-268.0":"2022-05-20T18:23:02.893Z","1.0.0-canary-1683-269.0":"2022-05-20T19:39:35.474Z","1.0.0-canary-1784-271.0":"2022-05-20T19:46:29.746Z","1.0.0-canary-1794-270.0":"2022-05-20T19:48:47.521Z","1.0.0-canary-1792-272.0":"2022-05-20T21:31:30.722Z","1.0.0-canary-1787-273.0":"2022-05-20T21:40:51.200Z","1.0.0-canary-1799-274.0":"2022-05-20T22:19:55.239Z","1.0.0-canary-1787-275.0":"2022-05-20T22:21:22.186Z","1.0.0-canary-1785-276.0":"2022-05-20T22:42:02.787Z","1.0.0-canary-1785-277.0":"2022-05-20T23:09:01.765Z","1.0.0-canary-1787-278.0":"2022-05-20T23:09:24.234Z","1.0.0-canary-1787-279.0":"2022-05-20T23:31:52.283Z","1.0.0-canary-1785-280.0":"2022-05-20T23:47:12.457Z","1.0.0-canary-1785-281.0":"2022-05-21T01:13:37.540Z","1.0.0-canary-1794-282.0":"2022-05-22T10:53:53.544Z","1.0.0-canary-1787-283.0":"2022-05-22T11:21:20.094Z","1.0.0-canary-1800-284.0":"2022-05-22T13:45:05.845Z","1.0.0-canary-1487-285.0":"2022-05-23T11:17:44.134Z","1.0.0-canary-1487-286.0":"2022-05-23T11:34:20.024Z","1.0.0-canary-1801-287.0":"2022-05-23T12:52:38.926Z","1.0.0-canary-1784-288.0":"2022-05-23T13:23:43.416Z","1.0.0-canary-1784-290.0":"2022-05-23T13:28:47.803Z","1.0.0-canary-1487-289.0":"2022-05-23T13:28:51.475Z","1.0.0-canary-1778-291.0":"2022-05-23T13:39:51.612Z","1.0.0-canary-1787-349.0":"2022-05-24T20:03:49.367Z","1.0.0-canary-1787-359.0":"2022-05-25T11:39:56.050Z","1.0.0-canary-1787-385.0":"2022-05-25T20:58:18.475Z","1.0.0-canary-1787-386.0":"2022-05-25T21:53:34.556Z","1.0.0-canary-1787-392.0":"2022-05-26T13:22:56.809Z","1.0.0-canary-1787-398.0":"2022-05-26T15:47:47.354Z","1.0.0-canary-1787-408.0":"2022-05-26T17:58:38.666Z","1.0.0-canary-1647-412.0":"2022-05-26T19:03:15.582Z","1.0.0-canary-1647-420.0":"2022-05-26T22:57:54.068Z","1.0.0-canary-1647-425.0":"2022-05-27T13:05:19.061Z","1.0.0-rc.2":"2022-06-03T19:36:42.150Z","1.0.0-canary-1647-475.0":"2022-06-07T19:04:56.950Z","1.0.0-canary-1647-477.0":"2022-06-07T21:08:48.342Z","1.0.0-canary-1647-478.0":"2022-06-07T22:07:29.554Z","1.0.0-canary-1647-481.0":"2022-06-08T14:33:30.645Z","1.0.0-canary-1911-491.0":"2022-06-09T17:37:37.577Z","1.0.0-canary-1911-492.0":"2022-06-09T17:40:20.614Z","1.0.0-canary-1914-493.0":"2022-06-09T18:52:27.463Z","1.0.0-canary-1914-494.0":"2022-06-09T19:49:47.962Z","1.0.0-canary-1914-495.0":"2022-06-09T20:38:49.963Z","1.0.0-canary-1911-497.0":"2022-06-10T14:56:19.627Z","1.0.0-rc.3":"2022-06-10T17:03:00.306Z","1.0.0-canary-1914-499.0":"2022-06-10T20:29:24.511Z","1.0.0-canary-1914-503.0":"2022-06-13T21:31:24.802Z","1.0.0-canary-1914-507.0":"2022-06-14T18:44:04.507Z","1.0.0-canary-1914-508.0":"2022-06-14T22:24:52.673Z","1.0.0-canary-1914-510.0":"2022-06-14T22:25:53.461Z","1.0.0-canary-1914-512.0":"2022-06-14T22:33:37.849Z","1.0.0-canary-1914-521.0":"2022-06-15T20:42:33.555Z","1.0.0-rc.4":"2022-06-16T10:14:05.691Z","1.0.0-rc.5":"2022-06-16T15:36:46.705Z","1.0.0-canary-1914-536.0":"2022-06-16T18:37:17.282Z","1.0.0-rc.6":"2022-06-16T18:50:41.334Z","1.0.0-canary-1914-537.0":"2022-06-16T18:54:00.693Z","1.0.0-canary-1914-538.0":"2022-06-16T19:15:13.362Z","1.0.0-rc.7":"2022-06-17T14:08:27.555Z","1.0.0-canary-1914-543.0":"2022-06-17T14:41:02.919Z","1.0.0-canary-1916-547.0":"2022-06-17T17:06:11.657Z","1.0.0-canary-1916-551.0":"2022-06-23T15:02:42.028Z","1.0.0-rc.8":"2022-06-23T19:44:37.615Z","1.0.0-rc.9":"2022-06-27T14:55:15.283Z","1.0.0-rc.10":"2022-06-28T18:52:17.776Z","1.0.0-canary-1934-572.0":"2022-07-05T14:38:46.159Z","1.0.0-rc.12":"2022-07-08T15:36:30.141Z","1.0.0-rc.13":"2022-08-01T18:17:23.271Z","1.0.0-rc.14":"2022-08-16T16:16:24.004Z","1.0.0-rc.15":"2022-08-24T12:57:44.077Z","1.0.0-canary-1956-655.0":"2022-09-21T20:43:23.809Z","1.0.0-canary-1956-656.0":"2022-09-21T21:44:26.174Z","1.0.0-canary-1956-657.0":"2022-09-21T21:45:06.548Z","1.0.0-rc.16":"2022-09-22T14:56:26.379Z","1.0.0-rc.17":"2022-09-30T16:08:30.835Z","1.0.0-canary-1952-680.0":"2022-10-06T20:36:30.524Z","1.0.0-canary-1952-681.0":"2022-10-07T16:47:26.934Z","1.0.0-canary-1952-682.0":"2022-10-07T19:56:36.357Z","1.0.0-canary-1952-683.0":"2022-10-10T14:57:11.858Z","1.0.0-canary-1952-684.0":"2022-10-10T15:53:15.050Z","1.0.0-canary-1952-685.0":"2022-10-10T16:41:34.513Z","1.0.0-canary-1952-686.0":"2022-10-10T16:43:36.841Z","1.0.0-canary-1952-687.0":"2022-10-10T17:24:16.820Z","1.0.0-canary-1952-688.0":"2022-10-10T20:01:35.405Z","1.0.0-rc.18":"2022-10-17T14:59:54.970Z","1.0.0-rc.19":"2022-10-18T19:15:44.283Z","1.0.0-canary-1937-704.0":"2022-10-19T16:11:28.470Z","1.0.0-rc.20":"2022-10-19T17:04:41.229Z","1.0.0-canary-1937-705.0":"2022-10-19T17:12:04.104Z","1.0.0-rc.21":"2022-10-19T18:31:57.433Z","1.0.0-canary-1937-709.0":"2022-10-19T18:32:05.545Z","1.0.0-canary-1964-713.0":"2022-10-19T19:00:47.396Z","1.0.0-canary-1964-714.0":"2022-10-19T19:04:25.181Z","1.0.0-canary-1964-715.0":"2022-10-19T23:36:06.315Z","1.0.0-canary-1964-716.0":"2022-10-20T22:06:24.380Z","1.0.0-canary-1937-717.0":"2022-10-21T13:49:22.291Z","1.0.0-rc.22":"2022-10-27T21:04:38.922Z","1.0.0-rc.23":"2023-02-08T20:44:44.185Z","1.0.0-rc.24":"2023-02-23T00:48:48.562Z","1.0.0-rc.25":"2023-03-01T03:32:21.842Z","1.0.0-canary-1991-835.0":"2023-03-02T13:34:55.960Z","1.0.0-canary-1991-838.0":"2023-03-03T16:56:46.687Z","1.0.0-canary-1991-857.0":"2023-03-13T21:05:03.781Z","1.0.0-rc.26":"2023-03-14T22:47:59.057Z","1.0.0-canary-1955-887.0":"2023-03-16T12:49:52.054Z","1.0.0-canary-1955-888.0":"2023-03-16T14:15:01.131Z","1.0.0-rc.27":"2023-03-16T16:58:38.593Z","1.0.0-rc.28":"2023-03-20T14:33:15.603Z","1.0.0-rc.29":"2023-03-21T23:57:26.877Z","1.0.0-canary-1955-936.0":"2023-03-23T19:48:57.582Z","1.0.0-canary-1991-953.0":"2023-04-03T09:01:55.772Z","1.0.0-canary-2020-957.0":"2023-04-03T10:10:46.547Z","1.0.0-canary-2020-961.0":"2023-04-04T12:21:22.834Z","1.0.0-canary-2020-962.0":"2023-04-04T12:27:06.066Z","1.0.0-canary-2020-965.0":"2023-04-04T14:14:33.047Z","1.0.0-canary-2020-966.0":"2023-04-04T21:20:18.103Z","1.0.0-canary-2020-968.0":"2023-04-05T10:28:20.582Z","1.0.0-canary-2020-969.0":"2023-04-05T13:37:47.363Z","1.0.0-canary-2020-971.0":"2023-04-05T17:18:40.976Z","1.0.0-rc.30":"2023-04-06T11:18:31.086Z","1.0.0-canary-2020-984.0":"2023-04-06T11:33:01.751Z","1.0.0-canary-2020-986.0":"2023-04-06T11:44:32.775Z","1.0.0-canary-2020-989.0":"2023-04-06T12:56:12.708Z","1.0.0-rc.31":"2023-04-06T13:01:32.415Z","1.0.0-canary-2020-991.0":"2023-04-06T13:12:18.279Z","1.0.0-rc.32":"2023-04-06T15:20:32.885Z","1.0.0-canary-2020-993.0":"2023-04-06T15:35:16.514Z","1.0.0-rc.33":"2023-04-06T16:33:10.272Z","1.0.0-canary-1991-1003.0":"2023-04-11T16:37:49.873Z","1.0.0-rc.34":"2023-04-13T10:28:01.008Z","1.0.0-canary-1991-1016.0":"2023-04-13T11:30:12.155Z","1.0.0-canary-1991-1018.0":"2023-04-13T16:00:08.209Z","1.0.0-canary-2033-1026.0":"2023-04-17T14:46:28.190Z","1.0.0-rc.35":"2023-04-17T14:59:08.292Z","1.0.0-canary-2035-1035.0.95b4a03":"2023-04-18T13:25:58.642Z","1.0.0-rc.36":"2023-04-18T13:39:45.083Z","1.0.0-canary-2037-1040.0.c6f2902":"2023-04-18T14:50:29.781Z","1.0.0-canary-2037-1041.0.a3d24a4":"2023-04-18T14:58:32.213Z","1.0.0-canary-2037-1042.0.b8ea86a":"2023-04-18T15:34:21.993Z","1.0.0-rc.37":"2023-04-18T21:44:14.301Z","1.0.0-canary-2040-1068.0.aa2e178":"2023-04-20T23:29:24.017Z","1.0.0-canary-2040-1086.0.7c842d9":"2023-04-25T22:07:56.224Z","1.0.0-canary-2040-1087.0.9766f74":"2023-04-26T01:52:29.918Z","1.0.0-canary-2040-1089.0.ac009c0":"2023-04-27T14:12:12.251Z","1.0.0-canary-2033-1122.0.bff6645":"2023-05-08T00:29:27.769Z","1.0.0-canary-2074-1123.0.b4e2ff2":"2023-05-08T01:47:28.841Z","1.0.0-canary-2074-1124.0.eacc3f3":"2023-05-08T02:28:59.914Z","1.0.0-canary-2074-1125.0.b66ad73":"2023-05-08T02:45:37.532Z","1.0.0-canary-2074-1127.0.4197db1":"2023-05-08T03:13:18.443Z","1.0.0-canary-2074-1128.0.6dfb10f":"2023-05-08T03:41:02.200Z","1.0.0-canary-2074-1129.0.d4a1eb8":"2023-05-08T04:10:45.490Z","1.0.0-canary-2055-1132.0.7904ad6":"2023-05-08T19:59:22.718Z","1.0.0-canary-2055-1134.0.0a6933a":"2023-05-08T22:18:15.211Z","1.0.0-canary-2055-1138.0.164310e":"2023-05-11T15:31:36.522Z","1.0.0-canary-2055-1166.0.164310e":"2023-05-25T22:12:23.853Z","1.0.0-canary-2055-1167.0.164310e":"2023-05-25T22:51:56.066Z","1.0.0-canary-2055-1168.0.164310e":"2023-05-25T22:55:43.319Z","1.0.0-rc.38":"2023-05-31T00:49:28.004Z","1.0.0-canary-2055-1248.0.164310e":"2023-06-01T20:06:49.515Z","1.0.0-canary-2055-1249.0.164310e":"2023-06-01T20:57:09.683Z","1.0.0-canary-2055-1251.0.828ddef":"2023-06-01T21:05:07.199Z","1.0.0-canary-2055-1250.0.828ddef":"2023-06-01T21:06:40.195Z","1.0.0-rc.39":"2023-06-01T22:44:20.669Z","1.0.0-canary-2055-1255.0.828ddef":"2023-06-02T18:40:52.185Z","1.0.0-canary-2110-1282.0.9ec19aa":"2023-06-05T01:21:07.673Z","1.0.0-canary-2110-1283.0.fc3628e":"2023-06-05T02:55:30.004Z","1.0.0-canary-2110-1284.0.47d8a52":"2023-06-05T09:13:12.558Z","1.0.0-canary-2110-1285.0.8eaec74":"2023-06-05T10:42:30.591Z","1.0.0-canary-2110-1286.0.ae630a7":"2023-06-05T11:24:35.731Z","1.0.0-canary-2110-1288.0.7213784":"2023-06-05T12:28:34.810Z","1.0.0-canary-2110-1292.0.5240c8b":"2023-06-05T18:51:04.384Z","1.0.0-canary-2055-1293.0.7035f98":"2023-06-05T20:51:08.690Z","1.0.0-rc.40":"2023-06-07T22:10:21.970Z","1.0.0-rc.41":"2023-06-08T00:20:02.808Z","1.0.0-canary-2055-1406.0.c6eba2c":"2023-06-14T19:23:49.685Z","1.0.0-canary-2055-1407.0.c92a369":"2023-06-14T20:46:55.834Z","1.0.0-canary-2055-1417.0.6188e93":"2023-06-15T13:35:40.706Z","1.0.0-rc.42":"2023-06-15T18:42:41.974Z"},"maintainers":[{"name":"npmbodiless","email":"npmbodiless@gmail.com"},{"name":"coden","email":"coden@its.jnj.com"},{"name":"awm086","email":"awm086@gmail.com"},{"name":"vanchezze","email":"Vanchezze@gmail.com"},{"name":"dewenli","email":"dewen.sinocrest@gmail.com"}],"description":"Bodiless YouTube component.","homepage":"https://github.com/johnsonandjohnson/bodiless-js#readme","repository":{"type":"git","url":"git+https://github.com/johnsonandjohnson/bodiless-js.git"},"author":{"name":"Ivan Rudiuk","email":"IRudiuk@its.jnj.com"},"bugs":{"url":"https://github.com/johnsonandjohnson/bodiless-js/issues"},"license":"Apache-2.0","readme":"","readmeFilename":""}