https://github.com/dtex/sam-youtube

SAM + jQuery YouTube video embed
https://github.com/dtex/sam-youtube

Last synced: 3 days ago
JSON representation

SAM + jQuery YouTube video embed

• Host: GitHub
• URL: https://github.com/dtex/sam-youtube
• Owner: dtex
• Created: 2012-03-01T23:15:43.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2014-01-14T21:54:51.000Z (almost 11 years ago)
• Last Synced: 2024-11-04T11:25:08.121Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 133 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.mkdn

Awesome Lists containing this project

README

        
**Embeds YouTube videos in SAM sites. Requires jQuery (optionally requires jQuery Tools for liteboxes)**

1) To embed a YouTube Video you first need a call to the json data. Change the 

author property to the YouTube account you are looking at:

``

Note that this only grabs the 50 most recent videos

2) Next you need a div to stick the video into. Change the rel property to 

a keyword match for the particular video you want to embed

`
`


3) If you set rel="all" then all the videos in the feed will be output

4) If you add class "multi" to your div, multiple videos will be output in a grid.

You 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.

5) 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. 

6) If you use a litebox you will also need jQuery tools i.e.:

``

7) You will also need this in your XSL, before your call for the json from YouTube:

` ]]>`

8) Here is some sample CSS to get you started with that:

    .embedYouTubeVideo { margin-bottom:24px; }

    .embedYouTubeVideo .vidThumb { height:195px; width:260px; float:left;}

    .embedYouTubeVideo .vidThumb img.thumb {height:195px; width:260px;border: solid 1px #9c9c9f;}

    .embedYouTubeVideo .vidThumb img.playButton {position:absolute;margin:67px 0 0 98px;}

    .embedYouTubeVideo .youTube { float:left; }

    .embedYouTubeVideo .youTubeVideoDescription { width:188px;float:right;padding: 0 16px;}

    .embedYouTubeVideo .youTubeVideoDescription p {width:188px;}

    .embedYouTubeVideo h3 { float:right;width:188px;font-size:13px;font-family:Helvetica, arial, sans-serif;font-weight:bold;padding:0 16px;}

    

    .embedYouTubeVideo.multi .youtubeVideo {float:left; margin:0 23px 12px 0;width:100px;}

    .embedYouTubeVideo.multi .youtubeVideo.last {margin:0 0 24px 0;}

    .embedYouTubeVideo.multi .vidThumb  {float:left; margin:0 23px 12px 0;width:100px;height:75px;}

    .embedYouTubeVideo.multi .vidThumb img.thumb { width: 100px;height:75px;}

    .embedYouTubeVideo.multi .vidThumb img.playButton {margin:11px 0 0 20px;}

    .embedYouTubeVideo.multi h3 { font-weight:normal;width:100px;float:none;padding:0; }

    .embedYouTubeVideo.multi .youTubeVideoDescription { display:none;}

    

    .overlay {padding:9px 40px;	width:576px;display:none;background-color:#fff;}

    .close {background:url(/images/close.png) no-repeat;position:absolute;top:9px;right:12px; display:block;width:21px;height:21px;cursor:pointer;}

    #player {height:450px;display:block;}