谷歌+和Facebook風格的iframe youtube視頻。默認顯示視頻圖像，當圖像點擊視頻播放

Question

我已經有一個插件，在我的網站上嵌入視頻稱爲oembed。我需要的是一個JavaScript代碼，用於在視頻播放器出現並播放時單擊圖像，將youtube iframe或其他嵌入代碼嵌入到視頻的默認圖像中。 Google +和Facebook已經實現了這個想法。請讓我知道如何做到這一點。

這是我的YouTube的iframe的例子：

<iframe width="267" height="200" src="http://www.youtube.com/embed/YOUTUBEID;feature=oembed" frameborder="0" allowfullscreen=""></iframe> 

我發現了兩個代碼和修改他們變成這樣：

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

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

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

if(id) { 
jQuery(this).replaceWith( 
          '<img width="420" height="215" src="http://i1.ytimg.com/vi/'+id+'/hqdefault.jpg"'+ 
          ' class="youtube" />'); 
} 
}); 
var youtubeIFRAME = '<p class="close">CLOSE</span><iframe data-address="$1" src="http://www.youtube.com/embed/$1?rel=0" frameborder="0" allowfullscreen></iframe>'; 

jQuery("img.youtube").click(function(){ 
var $this = $(this); 
$this.replaceWith('<iframe width="420" height="315" src="http://www.youtube.com/embed/$1?rel=0" frameborder="0" allowfullscreen></iframe>'     
        .replace("$1", $this.attr("data-address"))); 
}); 

現在的問題是嵌入的作品，但沒有抓住問題視頻ID。

Answer 1

問題是圍繞您的iframe有一個鏈接元素。我相信你可以解決這個問題，通過刪除鏈接和使用其他東西，如div：

function changeiframe() { 
objs = document.getElementsByTagName('iframe'); 
for (i in objs) { 
     if (objs[i].src) { 
     vidid = objs[i].src.split('/')[4].split('?')[0]; 
     linkurl = 'http://www.youtube.com/watch?v='+vidid; 
     bgurl = 'http://img.youtube.com/vi/'+vidid+'/0.jpg'; 
     imgurl = 'playsh.png'; 
     container = document.createElement('div'); 
     container.style.backgroundImage = 'url('+bgurl+')'; 
     container.className += "youvid"; 
     img = document.createElement('img'); 
     img.src = imgurl; 
     container.appendChild(img); 
     objs[i].outerHTML = container.outerHTML; 
     } 
    } 
}