{"id":19481509,"url":"https://github.com/anthonylan/ythook","last_synced_at":"2026-04-17T01:02:10.244Z","repository":{"id":44182917,"uuid":"229419269","full_name":"anthonylan/YTHook","owner":"anthonylan","description":"A simple Youtube playlist library","archived":false,"fork":false,"pushed_at":"2022-12-11T18:02:52.000Z","size":781,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-03T20:48:37.433Z","etag":null,"topics":["youtube-playlist","youtube-playlist-library","youtube-playlist-player","youtube-video"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anthonylan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-21T11:41:18.000Z","updated_at":"2023-06-19T11:54:34.000Z","dependencies_parsed_at":"2023-01-27T04:16:27.821Z","dependency_job_id":null,"html_url":"https://github.com/anthonylan/YTHook","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/anthonylan/YTHook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2FYTHook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2FYTHook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2FYTHook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2FYTHook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anthonylan","download_url":"https://codeload.github.com/anthonylan/YTHook/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthonylan%2FYTHook/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31910585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"ssl_error","status_checked_at":"2026-04-16T18:21:47.142Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["youtube-playlist","youtube-playlist-library","youtube-playlist-player","youtube-video"],"created_at":"2024-11-10T20:05:09.432Z","updated_at":"2026-04-17T01:02:10.200Z","avatar_url":"https://github.com/anthonylan.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YT Hook\n\n\u003ca href=\"https://ythook.marraine.co/\"\u003e\u003cimg src=\"public/assets/Screenshot_1.png\" alt=\"Bulma: a Flexbox CSS framework\" style=\"max-width:100%;\" width=\"100%\"\u003e\u003c/a\u003e\n\nHook is a simple Youtube playlist library that uses multiple playlist IDs to display videos in sequence. It requires 2 different playlist ids on a single page.\nExample: \n\n``mainPlayListId``: the main playlist for that specific page\n\n``nextPlayListId``: the next playlist from the upcoming page.\n\n---\n## 🚀 Demo\n\n#### 👉 [See demo on the official site](https://ythook.marraine.co/)\n----\n\n## 🤔 How to use it?\nAdd styles in `\u003chead\u003e`\n```html\n\u003clink href=\"https://ythook.marraine.co/css/hook.css\" rel=\"stylesheet\"\u003e\n```\n\nAdd the scripts right before closing `\u003cbody\u003e` tag, and declare your two playlist IDs:\n```html\n \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n    let mainPlayListId = 'playlistID1'\n    let nextPlayListId = 'playlistID2'\n    \u003c/script\u003e\n\u003cscript src=\"https://ythook.marraine.co/hook.js\"\u003e\u003c/script\u003e\n```\n\nI know, I know, nobody likes jQuery anymore. I promise the next version it won't be jQuery dependent anymore.  \n\n## HTML\n\nHook uses a pre-defined html structure:\n\n```html\n\u003csection class=\"main-hook\"\u003e\n \u003cdiv class=\"video-holder\"\u003e\u003c/div\u003e \n    \u003cdiv class=\"middle-nav\"\u003e\n        \u003ca href=\"play1\" class=\"isActive\"\u003eBillie Eilish\u003c/a\u003e\n        \u003ca href=\"play2\"\u003eThe weeknd\u003c/a\u003e\n        \u003ca href=\"play3\"\u003emigos\u003c/a\u003e\n        \u003ca href=\"play4\"\u003ePost malone\u003c/a\u003e\n        \u003ca href=\"play5\"\u003esia\u003c/a\u003e\n        \u003ca href=\"play6\"\u003ecamila cabello\u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv id=\"marraine-hook\"\u003e\u003c/div\u003e\n\u003c/section\u003e\n```\n\nTo display the next playlist at the left side of the page you'll need to add:\n\n```html\n\u003cdiv class=\"quickside\"\u003e\u003c/div\u003e\n```\nat the very top of the \n\n\u003esection tag\n\nLike this: \n```html\n\u003cdiv class=\"quickside\"\u003e\u003c/div\u003e\n\u003csection class=\"main-hook\"\u003e\n    \u003cdiv class=\"video-holder\"\u003e\u003c/div\u003e \n        \u003cdiv class=\"middle-nav\"\u003e\n            \u003ca href=\"play1\" class=\"isActive\"\u003eBillie Eilish\u003c/a\u003e\n            \u003ca href=\"play2\"\u003eThe weeknd\u003c/a\u003e\n            \u003ca href=\"play3\"\u003emigos\u003c/a\u003e\n            \u003ca href=\"play4\"\u003ePost malone\u003c/a\u003e\n            \u003ca href=\"play5\"\u003esia\u003c/a\u003e\n            \u003ca href=\"play6\"\u003ecamila cabello\u003c/a\u003e\n        \u003c/div\u003e\n  \u003cdiv id=\"marraine-hook\"\u003e\u003c/div\u003e\n\u003c/section\u003e\n```        \n\nThe `class` =\u003e `isActive` adds a red line at the bottom of the link on the current page, and should be removed or added following the page sequence.\n\n## Initialize Hook?\nNo need to initialize Hook, it has already been initialized. \n\n\n\n\n## ❔Have Questions?\n\nIf you found a bug, have a question or an idea, please don't hesitate to create new issues.\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonylan%2Fythook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonylan%2Fythook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonylan%2Fythook/lists"}