2011-11-20 85 views
2

如果YouTube的iframe嵌入代碼...jQuery的替代YouTube上的iFrame

<iframe width="560" height="315" src="http://www.youtube.com/embed/dd8W4PNUU3Q?rel=0" frameborder="0" allowfullscreen></iframe> 

你怎麼可以提取dd8W4PNUU3Q即視頻ID

,並與更換整個IFRAME

<img style="background-image:url('http://i1.ytimg.com/vi/dd8W4PNUU3Q/hqdefault.jpg');" class="someClass"/> 

,並用<a>捐贈包裹圖像...

<a href="http://www.MYURL.com/?v=dd8W4PNUU3Q"><img style="background-image:url('http://i1.ytimg.com/vi/dd8W4PNUU3Q/hqdefault.jpg');" class="someClass"/></a> 
+0

究竟是你想怎麼辦?這是否應該在某種腳本的YouTube網站上工作?書籤?或與您的網站嵌入式YouTube? – alonisser

+0

我很想知道最終目標。如果你在做這個客戶端,玩家已經被調用並顯示玩家圖像。你只是不希望玩家被嵌入?這是一個相當數據和代碼繁重的方式;但再一次,我不一定理解大局,我可能是錯的。 –

+0

您是否需要完整的js解決方案或者是否對您的解決方案進行僞編碼就足夠了?我不確定我有時間寫完整個東西 – alonisser

回答

5
var RE = /embed\/([a-zA-Z0-9_-]{11})/; 

jQuery("iframe").each(function(){ 

var id = (this.src.match(RE) || [])[1]; 

    if(id) { 
    jQuery(this).replaceWith('<a href="http://www.MYURL.com/?v='+id+'">'+ 
           '<img src="http://i1.ytimg.com/vi/'+id+'/hqdefault.jpg"'+ 
           ' class="someClass" /></a>'); 
    } 

}); 

的jsfiddle:http://jsfiddle.net/4E3DH/1/