如何调整YouTube播放器的大小，从缩略图大小到“正常”大小

Question

我想这与Facebook所做的相似，但是......我还没有研究过如何遵循他们所做的事情，如果这是一个骗局， 我道歉。

这个想法是有一个缩略图大小的播放器（width="220px"height="180px"），当点击时，调整为“正常”大小（当然，正常是任意的，但为了这个例子，如果我们去width="445px"，height="364px"作为Youtube默认），然后播放。

我假设onClick事件应该更改<object>和<embed>标记中定义的高度和宽度属性，但由于对象是闪光的，因此我假设Flash播放器“捕捉”点击而不是将它们报告给浏览器？

下面的视频是那些我打算使用的一个，而且是在这里给一个真实的例子：

<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使用缩略图，看起来像一个玩家 - 整洁的把戏。我发现了一个可以获取youtube缩略图的jQuery plugin，但我没有尝试过。

一些示例代码：

<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插件所做的唯一事情就是获取缩略图图像的网址 - 您可以获取大图或小图。

Answer 2

因为我现在还没有看到Andy的更新，所以我想出了一个...相当可怕的方式来做到这一点（但我接受了他的答案，因为它比我的好得多）。

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

用于音乐会以下HTML：

<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()代码。它在一种时尚之后起作用。但截图 - >裁剪 - >保存为video-id.png方法是乏味的，至少可以说。我认为我可能会保留我的解决方案 - 如果没有其他问题，可以说是可悲的骄傲 - 但我会尝试将其与jYoutube方法结合使用。

如果这不起作用，那么我会用Andy的答案。

---

作为一个更新，我已经适应的东西要多一点优雅，与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>，它希望应该成为，具有点击处理程序，将闪存视频对象缩小并将其替换为原始的.png。

这是......如果我能明白为什么jQuery将不让它有$(this).click();事件......

有时候，我只是希望我能知道何时停止...任何帮助表示赞赏.. =）