{"id":26601954,"url":"https://github.com/patrickmarabeas/jquery-youtube-api-player","last_synced_at":"2026-02-27T13:43:26.080Z","repository":{"id":8363062,"uuid":"9928568","full_name":"patrickmarabeas/jQuery-YouTube-API-Player","owner":"patrickmarabeas","description":"jQuery plugin to insert a YouTube player on the page","archived":false,"fork":false,"pushed_at":"2013-07-08T19:45:19.000Z","size":150,"stargazers_count":3,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-05-23T14:55:13.937Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"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/patrickmarabeas.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":"2013-05-08T04:45:45.000Z","updated_at":"2013-12-30T09:55:52.000Z","dependencies_parsed_at":"2022-07-30T23:47:53.924Z","dependency_job_id":null,"html_url":"https://github.com/patrickmarabeas/jQuery-YouTube-API-Player","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickmarabeas%2FjQuery-YouTube-API-Player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickmarabeas%2FjQuery-YouTube-API-Player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickmarabeas%2FjQuery-YouTube-API-Player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickmarabeas%2FjQuery-YouTube-API-Player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrickmarabeas","download_url":"https://codeload.github.com/patrickmarabeas/jQuery-YouTube-API-Player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245153416,"owners_count":20569401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-03-23T18:46:58.828Z","updated_at":"2026-02-27T13:43:21.047Z","avatar_url":"https://github.com/patrickmarabeas.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"jQuery-YouTube-API-Plugin\n=========================\n\nDemo:\nhttp://patrickmarabeas.github.io/jQuery-YouTube-API-Plugin/\n\nLink to specific video in the series:\nhttp://patrickmarabeas.github.io/jQuery-YouTube-API-Plugin/#video-UrS9AVPUMFQ\n\njQuery plugin to insert a YouTube player on the page\n\nYouTube API to load videos\n\nReturns video data for display\n\nAdds hash to URL for direct linking of videos\n\nBuilds select dropdown of videos in array and sanatises (requires https://github.com/jaubourg/jquery-jsonp)\n\ncontrols to be added shortly\n\nHTML\n----\n\n\t\u003cdiv id=\"videoContainer\"\u003e\n\t\t\n\t\t\u003cdiv id=\"yt\"\u003e\n\t\t\t\u003cimg id=\"aspect\" alt=\"Aspect Ratio\" src=\"\"/\u003e\n\t\t\t\u003cdiv id=\"player\"\u003e\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\t\n\t\u003c/div\u003e\n\t\n\t\u003cdiv id=\"youtubeCount\"\u003e\u003c/div\u003e\n\t\u003cdiv id=\"youtubeTitle\"\u003e\u003c/div\u003e\n\t\u003cdiv id=\"youtubeDescription\"\u003e\u003c/div\u003e\n\t\nLESS\n----\n\t\n\t#yt {\n\t\tposition: relative;\n\n\t\t#aspect {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\theight: auto;\n\t\t\topacity: 0;\n\t\t}\n\t\t\n\t\tiframe {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\twidth: 100%; \n\t\t\theight: 100%;\n\t\t\t\n\t\t\tborder: 0;\n\t\t}\n\t\t\n\t}\n\t\n\nExample video array\n-------------------\n\n\tvar testarr = [\n\t\t{\n\t\t\t\"id\": \"kqdBD6MMciA\", \n\t\t\t\"aspect\": \"4x3\", \n\t\t\t\"title\": \"video 1\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"UrS9AVPUMFQ\", \n\t\t\t\"aspect\": \"16x9\", \n\t\t\t\"title\": \"video 2\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"al2DFQEZl4M\", \n\t\t\t\"aspect\": \"16x10\", \n\t\t\t\"title\": \"video 3\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"xxxxxx\", //Bad video ID\n\t\t\t\"aspect\": \"16x10\",\n\t\t\t\"title\": \"video 4\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"aaaa\", //Bad video ID\n\t\t\t\"aspect\": \"16x10\",\n\t\t\t\"title\": \"video 5\"\n\t\t},\n\t\t{\n\t\t\t\"id\": \"YFSCftwdpF8\",\n\t\t\t\"aspect\": \"16x10\",\n\t\t\t\"title\": \"video 6\"\n\t\t}\n\t]\n\t\n\t\nPut the following in your footer (Don't place within $(document).ready)\n-----------------------------------------------------------------------\n\t\n\t\u003cscript type=\"text/javascript\"\u003e\n\n\t\tfunction onYouTubeIframeAPIReady() {\n\t\t\t\n\t\t\t$(\"#yt\").youTubeAPI({\n\t\t\t\tvideoArray: testarr,\n\t\t\t\thash: 'video-', //this is the hash prefix the plugin will look for to play a video from a direct link\n\t\t\t\tpluginDir: 'http://mydomain.com/scripts/jquery-ytapi/', //the plugin dir\n\t\t\t\tplayerSettings: {\n\t\t\t\t\tplayerVars: {\n\t\t\t\t\t\t//see plugin for list of more parameters\n\t\t\t\t\t\t'rel': 0 //hiding recomended videos at video completion\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tapiReturn: {\n\t\t\t\t\ttitle: $(\"#youtubeTitle\"),\n\t\t\t\t\tdescription: $(\"#youtubeDescription\"),\n\t\t\t\t\tviewCount: $(\"#youtubeCount\")\n\t\t\t\t},\n\t\t\t\tbuild: {\n\t\t\t\t\tdropdown: true //the plugin will sanatise and build a select drop down of the array of videos\n\t\t\t\t}\n\t\t\t});\n\t\t\t\n\t\t}\n\t\t\n\t\u003c/script\u003e\n\n\nLoad videos manually\n--------------------\n\nIf you wish to build your own list of videos from the array, you can access the loadVideo() function as such:\n\t\n\t$(\"#yt\").data('youTubeAPI').loadVideo(videoID);\n\t\nAn example of usage:\n\t\n\t\u003cdiv class=\"video\" data-id=\"tHeV1d30Id\"\u003e\n\t\n\t$(\".video\").on('click', function(){\t\t\n\t\tvar videoID = $(this).data('id');\n\t\t$(\"#yt\").data('youTubeAPI').loadVideo(videoID);\n\t});\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickmarabeas%2Fjquery-youtube-api-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickmarabeas%2Fjquery-youtube-api-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickmarabeas%2Fjquery-youtube-api-player/lists"}