SAM-YouTube
文件大小: unknow
源码售价: 5 个金币 积分规则     积分充值
资源说明:SAM + jQuery YouTube video embed
**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;}
本源码包内暂不包含可直接显示的源代码文件,请下载源码包。