最近有朋友問梅干一個有趣的特效，那就是當Youtube影片播放時，能不能滑鼠滑入播放框時，就出現一個文字的描述區塊，並以半透明方式蓋在播放器上方，其實這就有點像是梅問題首頁上方的輪播區塊，只不過那是壓在一般的靜態圖片上而已，而現在要壓在Youtube影音播放框中，其實原理差不多，只要讓層級大於那影音播放框，應就可順利的壓在播放框上方囉！所以梅干昨天花了點時間，從好友男丁大大的站中，挖了[自製 YouTube 影片播放清單]的文章，再把那輪播的的特效整合在一塊，哈～沒想到還真的是成功囉！
放在<head>…..</head>之間：
#css
ul.playlist {
margin: 0;
padding: 0;
list-style: none;
width: 260px;
float: left;
}
ul.playlist li {
margin: 0 3px;
float: left;
}
ul.playlist li a img {
border: 0;
vertical-align: middle;
margin-bottom:5px;
}
.tv {
background: #efefef;
width: 740px;
height: 360px;
position:relative;
overflow:hidden;
}
.video {
float: left;
width: 480px;
height: 360px;
}
/* == infobox == */
.infobox{
position:absolute;
padding:10px;
width:460px;
height:110px;
background: url(black.png) repeat;
z-index:100;
bottom:-130px;
color:#FFFFFF;
font-size:12px;
}
.infobox h2{margin:5px 0; font-size:21px;}
.infobox a{color:#fff; text-decoration:none; line-height:1.6em;}
.infobox a:hover{color:#FFCC33; }
#javascript
$(function(){
var videoTitle=“”;
var videoInfo=“”;
var videoLink=“”
var thumbSize = 'large', // 設定要取得的縮圖是大圖還是小圖
// 大圖寬高為 480X360；小圖寬高為 120X90
imgWidth = '120', // 限制圖片的寬
imgHeight = '90', // 限制圖片的高
swfWidth = '480', // 指定 YouTube 影片的寬
swfHeight = '360', // 指定 YouTube 影片的高
autoPlay = '&autoplay=0', // 是否載入 YouTube 影片後自動播放；若不要自動播放則設成 0
fullScreen = '&fs=1'; // 是否允許播放 YouTube 影片時能全螢幕播放
var $infoBox = $('.infobox');
$('.playlist>li>a').each(function(){
// 取得要連結轉換的網址及訊息內容
var _this = $(this),
_url = _this.attr('href'),
_info = _this.text(),
_type = (thumbSize == 'large') ? 0 : 2;
// 取得 vid
var vid = _url.match('[\\?&]v=([^&#]*)')[1];
// 取得縮圖
var thumbUrl = "http://img.youtube.com/vi/"+vid+"/" + _type + ".jpg";
// 把目前超連結的內容轉換成圖片並加入 click 事件
_this.html('<img src="'+thumbUrl+'" alt="'+_info+'" title="'+_info+'" width="'+imgWidth+'" height="'+imgHeight+'" />').click(function(){
return false;
}).focus(function(){
this.blur();
}).children('img').click(function(){
//取得標、文、連結
videoTitle = _this.attr('title');
videoInfo = _this.attr('rel');
videoLink = _this.attr('link');
//寫入目前的標、文、連結
$('.infobox h2').html(videoTitle);
$('.infobox span').html("<a href="+videoLink+" target='_blank'>"+videoInfo+"</a>");
// 當點擊到圖片時就轉換成 YouTube 影片
var swf = '<object width="'+swfWidth+'" height="'+swfHeight+'">';
swf += '<param name="movie" value="http://www.youtube.com/v/'+vid+autoPlay+fullScreen+'"></param>';
swf += '<param name="wmode" value="transparent"></param>';
swf += (fullScreen == '&fs=1') ? '<param name="allowfullscreen" value="true"></param>' : '';
swf += '<embed type="application/x-shockwave-flash" src="http://www.youtube.com/v/'+vid+autoPlay+fullScreen+'" ';
swf += (fullScreen == '&fs=1') ? 'allowfullscreen="true" ' : '';
swf += 'wmode="transparent" width="'+swfWidth+'" height="'+swfHeight+'"></embed>';
swf += '</object/>';
$('.video').html(swf);
return false;
});
});
// 先載入第一個影片
$('.playlist>li>a').eq(0).children('img').click();
// 變更影片播放為自動播放
autoPlay = '&autoplay=1';
//加入影片描述與滑動特效
$infoBox.add($('.video')).hover(function(){
// 讓 $caption 往上移動
moveInfo(30);
}, function(){
// 讓 $caption 移回原位
moveInfo(-130);
});
function moveInfo(position) {
$infoBox.stop().animate({
bottom:position
}, 200);
}
});
放在<body>…..</body>之間：
<div class=“tv”>
<div class=“infobox”>
<h2></h2>
<span></span> </div>
<div class=“video”></div>
<ul class="playlist">
<li><a href="http://www.youtube.com/watch?v=1qsXKaJ5SEs" title="玩命關頭5 Fast Five" rel="★馮迪索和保羅沃克率領《玩命關頭4》原班製作群再尬街頭！ 馮迪索和保羅沃克再度攜手主演演員陣容堅強的《玩命關頭》系列電影第五集《玩命關頭5》，這次的演員陣容加入了動作巨星巨石強森，故事和場景也搬到了海外，而且延續《玩命關頭》系列電影的特色，這部全新動作鉅片一樣有令人腎上腺素激增的驚險.....詳全文" link="http://tw.movie.yahoo.com/movieinfo_main.html/id=3744">玩命關頭5</a></li>
<li><a href="http://www.youtube.com/watch?v=UWu6KGG5ccg" title="關雲長 The Lost Bladesman" rel="★影壇第一功夫巨星甄子丹，銀幕重現關公過五關斬六將赫赫武功 ★全球華人引頸期待，讓你重新認識忠肝義膽的關公！ 電影《關雲長》由當今華語影壇第一功夫巨星甄子丹飾演最受崇敬的三國英雄人物關羽，並由《無間道》系列編導麥兆輝、莊文強再度聯手，邀集大陸大腕級演員姜文、孫儷.....詳全文" link="http://tw.movie.yahoo.com/movieinfo_main.html/id=3725">關雲長</a></li>
<li><a href="http://www.youtube.com/watch?v=IgPsvs5L82g" title="霸王鼠2 The Hairy Tooth Fairy 2" rel="盧卡斯是個八歲的小男孩。他想知道培瑞茲如何把牙齒換成硬幣而不被發現。沒想到盧卡斯的好奇心卻害得培瑞茲被吉爾．潘可夫抓起來。吉爾．潘可夫是一個沒有良心的企業家，為了發財而把培瑞茲的秘密公諸於世。盧卡斯一家必須完成不可能的任務，降低傷害，讓世界上最仁慈的老鼠培瑞茲能夠堅守任務.....詳全文" link="http://tw.movie.yahoo.com/movieinfo_main.html/id=3620">霸王鼠2</a></li>
<li><a href="http://www.youtube.com/watch?v=8t5kLnh8WjQ" title="愛情大臨演 JUST GO WITH IT" rel="2011年4月1日早場起！ 整型醫生丹尼(亞當山德勒 飾)為了把妹，在外都以已婚身分來博取辣妹的注意，但他後來卻被女友逼迫要和老婆對質。為了掩飾謊言，丹尼只好拜託診所助理凱薩琳(珍妮佛安妮絲頓 飾)假裝是元配，謊言越滾越大，演到後來，丹尼還得把卡薩琳的小孩都請出來.....詳全文" link="http://tw.movie.yahoo.com/movieinfo_main.html/id=3793">愛情大臨演</a></li>
<li><a href="http://www.youtube.com/watch?v=lu8RjmisLsA" title="啟動原始碼 Source Code" rel="★借殼出竅、扭轉時空！《2012》《明天過後》億萬製片打造全新片種！ ★《惡靈古堡4：陰陽界》特效團隊巔峰力作，分秒緊張、驚悚爆錶！ 最新科幻動作驚悚鉅片《啟動原始碼》充滿驚心動魄又緊張刺激的懸疑轉折，以高智商又快節奏的情節挑戰觀眾對於時空概念的想像，描述一名美軍特種部隊上尉，被招募加入一場極機密.....詳全文" link="http://tw.movie.yahoo.com/movieinfo_main.html/id=3722">啟動原始碼</a></li>
<li><a href="http://www.youtube.com/watch?v=1--M3gJsmQE" title="命運規劃局 The Adjustment Bureau" rel="們是否能掌控自己的人生？或者我們在想都沒想到之前，我們的決定早就已成定案？我們是否能掌控自己的命運？或者是由不知名的力量操控？奧斯卡獎得主麥特戴蒙（《神鬼認證》系列電影、《真實的勇氣》）以及愛蜜莉布朗（《穿著Prada的惡魔》、《狼嚎再起》）領銜主演的《命運規劃局》探討這些發人省思的問題.....詳全文" link="http://www.uip.com.tw/AdjustmentBureau/">命運規劃局</a></li>
</ul>
</div>
之後若要新增任何Youtube的影片時，只要加在playlist中，並且依照下方的格式與參數向下加就行了，參數設定如下：
<li><a href="Youtube 影片網址" title=”標題” rel=”述描文字” link=”連結網址” >連結名稱</a> </li>
其實Youtube是一個相當不錯且穩定的影音平台，所以有不少的網站或是公司，則會將一些promo的影片放到上面去，但Youtube只提供嵌入影音的原始碼，若想在影片中出現像一些簡短的介紹或連結時，就無法達成所以梅干把它整合在一塊，有需要的朋友們，直接拿去套用就行囉！並依照格式輸入標題、文案、連結，程式就會自動幫你完成囉！
[範例預覽] [範例下載]