Ersetze ein Embed oder Iframe Youtube Video durch ein Tumbnail + Link zu Vídeo

Question

Ich brauche ein Javascript, das auf Header gesetzt werden kann, erkennt einen Youtube Embed oder Iframe Player und ersetzt es durch ein mit dem Vídeo auf youtube verbundenes Tumbnail.

Das Skript sollte ein Code wie folgt diejenigen identifiziert:

<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/J4oJWUJpbLY?fs=1&amp;hl=pt_BR&amp;hd=1&amp;color1=0x5d1719&amp;color2=0xcd311b"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/J4oJWUJpbLY?fs=1&amp;hl=pt_BR&amp;hd=1&amp;color1=0x5d1719&amp;color2=0xcd311b" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object> 

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="560" height="345" src="http://www.youtube.com/embed/J4oJWUJpbLY?hd=1" frameborder="0"></iframe> 

Und ersetzen, indem es:

<a href="http://www.youtube.com/watch?v=n1VCUF2xqKk" target="_blank"><img src="http://img.youtube.com/vi/n1VCUF2xqKk/default.jpg" alt="" /></a> 

Schauen Sie, dass die Variable die Video-ID ist.

Es ist möglich?

UPDATE [Code mit ihren großen Daumen und Play-Symbol)

//FUNC OBJECT 
function changeobj() { 
    objs = document.getElementsByTagName('object'); 
    for (i in objs) { 
     for (o in objs[i].children) { 
      if (objs[i].children[o].getAttribute && objs[i].children[o].getAttribute('name') == 'movie') { 
        vidid = objs[i].children[o].getAttribute('value').split('/')[4].split('?')[0]; 
        linkurl = 'http://www.youtube.com/watch?v='+vidid; 
        bgurl = 'http://img.youtube.com/vi/'+vidid+'/0.jpg'; 
        imgurl = 'playsh.png'; 
        link = document.createElement('a'); 
        link.setAttribute('href',linkurl); 
        link.setAttribute('target','_blank'); 
        link.style.backgroundImage = 'url('+bgurl+')'; 
        link.className += "youvid"; 
        img = document.createElement('img'); 
        img.src = imgurl; 
        link.appendChild(img); 
        objs[i].innerHTML = ''; 
        objs[i].appendChild(link); 
       } 
      } 
     } 
    } 

//FUNC IFRAME 
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'; 
      link = document.createElement('a'); 
      link.setAttribute('href',linkurl); 
      link.setAttribute('target','_blank'); 
      link.style.backgroundImage = 'url('+bgurl+')'; 
      link.className += "youvid"; 
      img = document.createElement('img'); 
      img.src = imgurl; 
      link.appendChild(img); 
      objs[i].outerHTML = link.outerHTML; 
      } 
     } 
    } 


window.onload = function() { 
    changeobj(); 
    changeiframe(); 
    } 

Die CSS:

.youvid { 
    background-repeat: no-repeat; 
    position: relative; 
    display: block; 
    text-align: center; 
    background-position: center; 
} 

Ein Fehler noch remais, die changeiframe Funktion ersetzt nur die ungeraden (1., 3. , 5. ...).

Answer 1

Das ist, was ich gefunden habe. Es wurde nur in Google Chrome getestet.

function changeobj() { 
    objs = document.getElementsByTagName('object'); 
    for (i in objs) { 
     for (o in objs[i].children) { 
      if (objs[i].children[o].getAttribute('name') == 'movie') { 
        vidid = objs[i].children[o].getAttribute('value').split('/')[4].split('?')[0]; 
        linkurl = 'http://www.youtube.com/watch?v='+vidid; 
        imgurl = 'http://img.youtube.com/vi/'+vidid+'/default.jpg'; 
        link = document.createElement('a'); 
        link.setAttribute('href',linkurl); 
        link.setAttribute('target','_blank'); 
        img = document.createElement('img'); 
        img.src = imgurl; 
        link.appendChild(img); 
        objs[i].innerHTML = ''; 
        objs[i].appendChild(link); 
       } 
      } 
     } 
    } 

function changeiframe() { 
    objs = document.getElementsByClassName('youtube-player'); 
    for (i in objs) { 
     console.log(objs[i]); 
     vidid = objs[i].src.split('/')[4].split('?')[0]; 
     linkurl = 'http://www.youtube.com/watch?v='+vidid; 
     imgurl = 'http://img.youtube.com/vi/'+vidid+'/default.jpg'; 
     link = document.createElement('a'); 
     link.setAttribute('href',linkurl); 
     link.setAttribute('target','_blank'); 
     img = document.createElement('img'); 
     img.src = imgurl; 
     link.appendChild(img); 
     objs[i].outerHTML = link.outerHTML; 
     } 
    } 

window.onload = function() { 
    changeobj(); 
    changeiframe(); 
    } 

Ja, ich weiß. Es gibt einen Fehler darin. Deshalb wird es nicht enden. Ich arbeite dran.

EDIT:

ich die ursprünglichen Fehler behoben:

function changeobj() { 
    objs = document.getElementsByTagName('object'); 
    for (i in objs) { 
     for (o in objs[i].children) { 
      if (objs[i].children[o].getAttribute && objs[i].children[o].getAttribute('name') == 'movie') { 
        vidid = objs[i].children[o].getAttribute('value').split('/')[4].split('?')[0]; 
        linkurl = 'http://www.youtube.com/watch?v='+vidid; 
        imgurl = 'http://img.youtube.com/vi/'+vidid+'/default.jpg'; 
        link = document.createElement('a'); 
        link.setAttribute('href',linkurl); 
        link.setAttribute('target','_blank'); 
        img = document.createElement('img'); 
        img.src = imgurl; 
        link.appendChild(img); 
        objs[i].innerHTML = ''; 
        objs[i].appendChild(link); 
       } 
      } 
     } 
    } 

function changeiframe() { 
    objs = document.getElementsByClassName('youtube-player'); 
    for (i in objs) { 
      if (objs[i].src) { 
      vidid = objs[i].src.split('/')[4].split('?')[0]; 
      linkurl = 'http://www.youtube.com/watch?v='+vidid; 
      imgurl = 'http://img.youtube.com/vi/'+vidid+'/default.jpg'; 
      link = document.createElement('a'); 
      link.setAttribute('href',linkurl); 
      link.setAttribute('target','_blank'); 
      img = document.createElement('img'); 
      img.src = imgurl; 
      link.appendChild(img); 
      objs[i].outerHTML = link.outerHTML; 
      } 
     } 
    } 

window.onload = function() { 
    changeobj(); 
    changeiframe(); 
    } 

Es ist ein weiterer Fehler, der jeden vierten Film nicht geladen werden, aber ich bin sicher, dies sollten Ihnen genug geben zu machen deine eigene Version.

EDIT: @evel - Wenn Sie eine Play-Taste setzen möchten, können Sie so etwas wie dies in Ihre CSS setzen:

.YOUTUBE_VID { 
background-image: play.png; 
background-repeat: none; 
background-postion: center; 
} 

Und als es um die Klasse zu dem Link hinzufügen:

link.className += " .YOUTUBE_VID"; 

EDIT: Statt der for-Schleife verwenden, ich die Funktion bin Looping. Das scheint zu funktionieren:

function changeiframe() { 
    objs = document.getElementsByClassName('youtube-player'); 
     if (!objs[0]){return false;}; 
     if (objs[0]) { 
     vidid = objs[0].src.split('/')[4].split('?')[0]; 
     linkurl = 'http://www.youtube.com/watch?v='+vidid; 
     imgurl = 'http://img.youtube.com/vi/'+vidid+'/default.jpg'; 
     link = document.createElement('a'); 
     link.setAttribute('href',linkurl); 
     link.setAttribute('target','_blank'); 
     img = document.createElement('img'); 
     img.src = imgurl; 
     link.appendChild(img); 
     objs[0].outerHTML = link.outerHTML; 
     } 
     changeiframe(); 
    }