{"_id":"@dankolz/youtube-no-related-videos","_rev":"1-644a9003464bdf93352ba855c1bc67d1","name":"@dankolz/youtube-no-related-videos","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@dankolz/youtube-no-related-videos","version":"1.0.0","description":"## Purpose","main":"client-lib/load-video.mjs","scripts":{"build-less":"npx lessc less/youtube-no-related-videos.less > demo.css","demo":"npx http-server -p 3000"},"keywords":[],"author":"","license":"ISC","devDependencies":{"http-server":"^14.1.1","less":"^4.2.0"},"gitHead":"e5ac3384386eb9bcf1fa70b1cd11d7f84716f052","_id":"@dankolz/youtube-no-related-videos@1.0.0","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-HdDztO5WkOb1uTmQUHXIL6dR+mCWb4e0CMvMaC/Hr2vh3a5aoCeFAv/vptPL78LqXuGjM6FvsS25KOTfP3b/Bw==","shasum":"164943271b2bdad75f69656086a07781a2fbf833","tarball":"https://registry.npmjs.org/@dankolz/youtube-no-related-videos/-/youtube-no-related-videos-1.0.0.tgz","fileCount":7,"unpackedSize":46317,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9k7AfUEFiwCZ4PABFw7d1qWZPAitVmXvAFV+BUaoBAQIhALJwfFZ/Laf4LxJb/nBx8jgs0IbbNMUgcnmhAEi2sp3D"}]},"_npmUser":{"name":"dankolz","email":"dan@emergentideas.com"},"directories":{},"maintainers":[{"name":"dankolz","email":"dan@emergentideas.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube-no-related-videos_1.0.0_1709497257919_0.24786266349847286"},"_hasShrinkwrap":false},"1.0.1":{"name":"@dankolz/youtube-no-related-videos","version":"1.0.1","description":"## Purpose","main":"client-lib/load-video.mjs","scripts":{"build-less":"npx lessc less/youtube-no-related-videos.less > demo.css","demo":"npx http-server -p 3000"},"keywords":[],"author":"","license":"ISC","devDependencies":{"http-server":"^14.1.1","less":"^4.2.0"},"gitHead":"80d41b94d1a61264b208d8c5c152285554d004e8","_id":"@dankolz/youtube-no-related-videos@1.0.1","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-NJppsV7PrGdWr04BqL4oaaRnkhjaglV1P8bGDIrPhoA7dpnbSZiodpJl7cHFihLJu/NZUii2Yv5i7d3nIACplQ==","shasum":"6a2b51cbc10ba889388f73824931e89ba8537b76","tarball":"https://registry.npmjs.org/@dankolz/youtube-no-related-videos/-/youtube-no-related-videos-1.0.1.tgz","fileCount":7,"unpackedSize":47089,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDgQD9BWBwe8CmZPkdlzyESKGvewiN76fzaI09KlPHhQIhANj1AFh9GX6Dm/Jrm9Lhev73f4de59U2PMumsBImqwOS"}]},"_npmUser":{"name":"dankolz","email":"dan@emergentideas.com"},"directories":{},"maintainers":[{"name":"dankolz","email":"dan@emergentideas.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/youtube-no-related-videos_1.0.1_1709498403227_0.2445297964553561"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-03T20:20:57.816Z","1.0.0":"2024-03-03T20:20:58.069Z","modified":"2024-03-03T20:40:03.833Z","1.0.1":"2024-03-03T20:40:03.380Z"},"maintainers":[{"name":"dankolz","email":"dan@emergentideas.com"}],"description":"## Purpose","keywords":[],"license":"ISC","readme":"# Youtube No Related Videos\n\n## Purpose\n\nLots of companies like to use YouTube videos because it makes them easy to convert,\nstore, and track the viewing of. However, the YouTube branding sometimes looks bad\nin a well designed page and the related videos it shows, even when restricted to \nthe same channel, are almost never what I want the user to see after they watch \nthe video.\n\nSo, this code makes a little dance. Show a poster over video, wait for the video\nto load before showing, let the video do its normal thing, but when the video is\ndone, reset the position of the video to its start, pause, and show the poster.\n\n\n## Install\n\n```bash\nnpm install @dankolz/youtube-no-related-videos\n```\n\n## Usage\n\n```js\nimport loadVideo from \"@dankolz/youtube-no-related-videos\"\n\nloadVideo({\n\tvideoId: '71U_UHKSkFg'\n})\n```\n\n```html\n<div class=\"youtube-no-related-videos-holder\">\n\t<picture class=\"\">\n\t\t<img src=\"./poster-3.jpg\" alt=\"poster-3\" width=\"843\" height=\"474\" style=\"height: auto\">\n\t</picture>\n\t<div id=\"player\">\n\t</div>\n</div>\n````\n\nThis will also require some css which you can include something like:\n\n```less\n@import \"../node_modules/@dankolz/youtube-no-related-videos/less/youtube-no-related-videos.less\";\n```\n\nor copy the css out of demo.css or write your own. The javascript is just changing the z-index\nof various parts, so it works with a lot of different layouts.\n\nThis code handles adding the YouTube api js to the page if it's not already there.\n\n## Demo\n\nThere's a demo (example.html) but unfortunately you have to run a server to get it to work right, so:\n\n```bash\nnpm run demo\n```\n\nThen point your browser to: [http://localhost:3000/example.html](http://localhost:3000/example.html)\n\n\n","readmeFilename":"README.md"}