谷歌+和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; 
     } 
    } 
}