埋め込みまたはiFrame YouTube動画をvídeoのサムネイル+リンクに置き換えます。

YouTubeの埋め込みまたはiframeプレーヤーを認識し、YouTubeのvídeoにリンクされたサムネイルで置き換えるヘッダーに配置できるjavascriptが必要です。埋め込みまたはiFrame YouTube動画をvídeoのサムネイル+リンクに置き換えます。

スクリプトは、このもののようなコードを特定する必要があります。

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

をそして、それによって置き換える：

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

は、変数がビデオIDであることを確認してください。

可能でしょうか？大絶賛whith

UPDATE [コードやアイコンを演じる）

//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(); 
    }

CSS：

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

一つのバグはまだremais、changeiframe機能は奇数のみのもの（第一、第三に取って代わります、5番目...）。

出典

2011-01-16 Evel

ビデオの初期表示方法を制御していますか？ oEmbedを使用すると、簡単にサムネイルを生成し、iFrameやオブジェクトを読み込んだ後で置き換えることなく、そのように操作できます。ここの例http://levelonestudiosatx.com/media/ – Cole

これは私が思いついたものです。 Google Chromeでのみテストされています。

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

はい、わかりました。それにバグがあります。それが終わらない理由です。私はそれに取り組んでいます。

EDIT：そこ任意の第四のムービーをロードしません別のバグがあるが、私はこれを作るのに十分なあなたを与える必要があると確信している

：

私は、元のバグを修正自分のバージョン。

EDIT： @evel - あなたが再生ボタンを配置したい場合は、あなたがあなたのCSSには、このようなものを置くことができます。

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

そしてリンクにそれをクラスを追加より：

link.className += " .YOUTUBE_VID";

EDIT： forループを使用する代わりに、関数をループしています。これは動作しているようです：

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

出典

2011-01-16 01:40:49 Eric

偉大な作品が大丈夫、私はほとんどjavacriptについて何も理解していない – Evel

エリックあなたのコードは素晴らしいです、サムネイル上に再生ボタンpngを置くことが可能で、それは互換性のあるwhithに？ – Evel

私は再生ボタンを追加しましたが、大きな親指で何を意味するのか分かりません。あなたがjavasciptを理解していない場合は、http：//www.w3schools.com/ – Eric

埋め込みまたはiFrame YouTube動画をvídeoのサムネイル+リンクに置き換えます。

答えて

関連する問題