google +とfacebook style iframe youtube video。画像がクリックされたときにビデオ画像が表示されます

Question

oembedというサイトに動画を埋め込んだプラグインが既にあります。私が必要とするのは、YouTubeのiframeや別の埋め込みをビデオのデフォルトのイメージに変換するJavaScriptコードです。イメージがクリックされると、ビデオプレーヤーが表示され、再生されます。 Google +とFacebookにこのアイデアが実装されました。これを実現させる方法を教えてください。

これは私のユーチューブはiframeの例である：

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

私は2つのコードを発見し、これにそれらを修正：

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; 
     } 
    } 
}