google + и facebook style iframe youtube video. по умолчанию отображает видеоизображение, когда воспроизводится видеоролик с изображением

Question

У меня уже есть плагин, который включает видео на моем сайте под названием oembed. Мне нужен код javascript, который преобразует iframe в YouTube или другой, в изображение изображения по умолчанию, когда нажимается клик, появляется и воспроизводится видеоплейер. 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; 
     } 
    } 
}