サムネイルサイズからサムネイルサイズを「通常」のサイズに調整する方法

Question

これはFacebookと同様ですが、私は彼らのやり方に従う方法を練っていません。 、 謝罪します。

アイデアは、クリックすると「通常」のサイズに調整されるサムネイルサイズのプレーヤ（width="220px"height="180px"）を使用することです（通常は任意ですが、この例では、 width="445px"、height="364px"）を入力して再生します。

私はonClickイベントが<object>と<embed>タグで定義された高さと幅のプロパティを変更する必要があることを仮定しているが、オブジェクトがフラッシュであるので、私はフラッシュプレイヤーのキャプチャに "クリックを想定するのではなく、ブラウザにそれらを報告します？

次のビデオは、私が使用するそれらの一つであり、実際の例を与えるためにここにある：添加物として

<object class="yt" width="445" height="364"> 
<param name="movie" value="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1"></param> 
<param name="allowFullScreen" value="true"></param> 
<param name="allowscriptaccess" value="always"></param> 
<embed src="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed> 
</object> 

を、これがために、静的なHTMLページで使用される可能性がありますすぐにphp（5.2）サイトに移動すると、phpとhtmlの両方にjQuery 1.3.2がリンクされています。これを簡単に行うためにサードパーティのプラグインを使用するのは嬉しいです。

何かすべての助けがありがたいです、私には何が頼まれているのかと尋ねることは申し訳ありません。それはが明らかにする必要がありますね。

ありがとうございます。

Answer 1

Facebookは、ちょうどプレーヤーのように見えるサムネイルを使っています。私はjQuery pluginがYouTubeのサムネイルを取得することができますが、私はそれを試みていない。

いくつかのサンプルコード：

<div id="youtoobin"> 

</div> 

<div id="blarg" style="display:none"> 
    <object class="yt" width="445" height="364"> 
    <param name="movie" value="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1"></param> 
    <param name="allowFullScreen" value="true"></param> 
    <param name="allowscriptaccess" value="always"></param> 
    <embed src="http://www.youtube.com/v/2ieLb3RAblA&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed> 
    </object> 
</div> 

そして、JS：

<script> 
    $(function() { 
    $("#youtoobin").append("<img id='thumby' src='" + $.jYoutube('2ieLb3RAblA', 'small') + "'/>"); 

     $("#thumby").live("click", function() { 
      $("#youtoobin").html($("#blarg").html()); 
     }); 
    }); 
</script> 

私は、あなたはおそらく、ユーザーが画像をクリックするとされている場合ことをしたいので、上の自動再生を回しました。これは、アプリに統合するための出発点になるはずです。 jQueryプラグインが行う唯一のことは、サムネイル画像のURLを取得することです。大小の画像を取得できます。

Answer 2

私はAndy 's Tilからのアップデートを見たことがないので、これを行うにはかなり恐ろしい方法を思いついた（しかし、私は自分の答えを受け入れた。以下のHTMLと協調して使用される

 <script type="text/javascript"> 
    $(document).ready(function(){ 

    $("img").click(function() { 

    var videoID = $(this).attr("id"); 

    $(this).replaceWith("<object class=\"yt\" width=\"445\" height=\"364\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999&border=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"445\" height=\"364\"></embed></object>"); 

    }); 

    }); 

     </script> 

：

<dl> 
<dt>Thoughts of Sacrament</dt> 
<dd><img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" class="yt" /></dd> 

<dt>Sanity falling</dt> 
<dd><img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" class="yt" /></dd> 
</dl> 

私のソリューションは、クリックされた画像から#id属性を取り、その後、挿入そのreplaceWith()コードに。それはファッションの後、動作します。しかし、screenshot - > crop - > video-id.pngのようなアプローチで保存するのは退屈で、言い表せません。私はおそらく私のソリューションを保つだろうと思っています。何もない限り、哀れなプライドの問題ですが、私はそれをjYoutubeのアプローチに組み合わせようと試みます。

これでうまくいかない場合は、アンディの答えを使用します。アップデートとして

---

、私はjQueryの animate()で、もう少し優雅する事を適応してきました：

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("img").click(function() { 

     var videoID = $(this).attr("id"); 

     $(this).animate({ 
     width: "445px", 
     height: "364px" 
     }, 600, function() { 

      $(this).replaceWith("<object id=\"" + videoID + "\" class=\"yt\" width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object><span class=\"close\"><a href=\"#\">x</a></span>"); 
     }); 
    }); 

}); 
     </script> 

また、私はクリックするだけで、うまくいけば役立つはずである<span class="close"><a href="#">x</a></span>を生成しています-handlerを使用して、フラッシュビデオオブジェクトを元に戻し、元の.pngに置き換えます。

これは... jQueryのは、それが$(this).click();イベントを持たせませんなぜ私がうまくできるかどうか...

時々私はちょうど私がどんな助けが高く評価され...停止したときに知っていたいです.. 。=）