{"id":16241338,"url":"https://github.com/dtex/sam-youtube","last_synced_at":"2025-08-08T18:46:25.190Z","repository":{"id":2613421,"uuid":"3597231","full_name":"dtex/SAM-YouTube","owner":"dtex","description":"SAM + jQuery YouTube video embed","archived":false,"fork":false,"pushed_at":"2014-01-14T21:54:51.000Z","size":136,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T06:47:13.152Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"cucumber/cucumber-ruby","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dtex.png","metadata":{"files":{"readme":"README.mkdn","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":"2012-03-01T23:15:43.000Z","updated_at":"2014-01-14T21:54:53.000Z","dependencies_parsed_at":"2022-07-09T15:02:31.630Z","dependency_job_id":null,"html_url":"https://github.com/dtex/SAM-YouTube","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtex%2FSAM-YouTube","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtex%2FSAM-YouTube/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtex%2FSAM-YouTube/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtex%2FSAM-YouTube/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dtex","download_url":"https://codeload.github.com/dtex/SAM-YouTube/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247819946,"owners_count":21001394,"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":"2024-10-10T14:07:12.112Z","updated_at":"2025-04-08T09:52:29.809Z","avatar_url":"https://github.com/dtex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**Embeds YouTube videos in SAM sites. Requires jQuery (optionally requires jQuery Tools for liteboxes)**\n\n1) To embed a YouTube Video you first need a call to the json data. Change the \nauthor property to the YouTube account you are looking at:\n\n`\u003cscript type=\"text/javascript\" src=\"http://gdata.youtube.com/feeds/api/videos?callback=yt\u0026amp;alt=json-in-script\u0026amp;orderby=published\u0026amp;author=BrandExtract\u0026amp;v=2\u0026max-results=50\"\u003e\u003c/script\u003e`\n\nNote that this only grabs the 50 most recent videos\n\n2) Next you need a div to stick the video into. Change the rel property to \na keyword match for the particular video you want to embed\n\n`\u003cdiv class=\"embedYouTubeVideo\" rel=\"featured\"\u003e\u003c/div\u003e`\n\n3) If you set rel=\"all\" then all the videos in the feed will be output\n\n4) If you add class \"multi\" to your div, multiple videos will be output in a grid.\nYou can set the column and row variables below to control the size. It will also only output the number of videos required to fill your grid.\n\n5) By default the videos thumbnails will link to YouTube, but you add class \"inline\" to your div, an inline video player will replace the thumbnail. If you add class \"litebox\" the video will play in a litebox. \n\n6) If you use a litebox you will also need jQuery tools i.e.:\n\n`\u003cscript src=\"/js/jquery.tools.min.js\"\u003e\u003c/script\u003e`\n\n7) You will also need this in your XSL, before your call for the json from YouTube:\n\n`\u003cxsl:text disable-output-escaping=\"yes\"\u003e\u003c![CDATA[\u003cdiv class=\"overlay\" style=\"background-image:url('/images/spacer.gif')\"\u003e\u003ca id=\"player\"\u003e\u0026nbsp;\u003c/a\u003e\u003c/div\u003e]]\u003e\u003c/xsl:text\u003e`\n\n8) Here is some sample CSS to get you started with that:\n\n    .embedYouTubeVideo { margin-bottom:24px; }\n    .embedYouTubeVideo .vidThumb { height:195px; width:260px; float:left;}\n    .embedYouTubeVideo .vidThumb img.thumb {height:195px; width:260px;border: solid 1px #9c9c9f;}\n    .embedYouTubeVideo .vidThumb img.playButton {position:absolute;margin:67px 0 0 98px;}\n    .embedYouTubeVideo .youTube { float:left; }\n    .embedYouTubeVideo .youTubeVideoDescription { width:188px;float:right;padding: 0 16px;}\n    .embedYouTubeVideo .youTubeVideoDescription p {width:188px;}\n    .embedYouTubeVideo h3 { float:right;width:188px;font-size:13px;font-family:Helvetica, arial, sans-serif;font-weight:bold;padding:0 16px;}\n    \n    .embedYouTubeVideo.multi .youtubeVideo {float:left; margin:0 23px 12px 0;width:100px;}\n    .embedYouTubeVideo.multi .youtubeVideo.last {margin:0 0 24px 0;}\n    .embedYouTubeVideo.multi .vidThumb  {float:left; margin:0 23px 12px 0;width:100px;height:75px;}\n    .embedYouTubeVideo.multi .vidThumb img.thumb { width: 100px;height:75px;}\n    .embedYouTubeVideo.multi .vidThumb img.playButton {margin:11px 0 0 20px;}\n    .embedYouTubeVideo.multi h3 { font-weight:normal;width:100px;float:none;padding:0; }\n    .embedYouTubeVideo.multi .youTubeVideoDescription { display:none;}\n    \n    .overlay {padding:9px 40px;\twidth:576px;display:none;background-color:#fff;}\n    .close {background:url(/images/close.png) no-repeat;position:absolute;top:9px;right:12px; display:block;width:21px;height:21px;cursor:pointer;}\n    #player {height:450px;display:block;}","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtex%2Fsam-youtube","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdtex%2Fsam-youtube","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtex%2Fsam-youtube/lists"}