像点击Facebook一样展开YouTube视频

时间:2012-06-23 01:38:46

标签: jquery youtube

我的网站上有很多缩略图,用于遵循以下格式的YouTube视频:

<iframe width="250" height="141" src="http://www.youtube.com/embed/<VIDEOID>" frameborder="0" allowfullscreen ></iframe>

我想要发生的是当您点击播放视频时,播放器在开始播放前会变为500x500的大小。它需要为此集中的任何视频执行此操作。

这与当有人点击Facebook上的视频时发生的情况相同,它会变得更大,然后开始播放。

使用jQuery或其他方法执行此操作的任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:7)

Facebook没有显示开始的框架;它们显示一个图像,上面有一个“播放”按钮:

https://fbexternal-a.akamaihd.net/safe_image.php?d=AQD6a6UECdMO9RsC&url=http%3A%2F%2Fi4.ytimg.com%2Fvi%2FsWwNTSj2Cy0%2Fmqdefault.jpg

(按比例缩小)加上

https://s-static.ak.fbcdn.net/rsrc.php/v2/yG/r/Gj2ad6O09TZ.png

等于

https://dl-web.dropbox.com/u/113308/so/fb_movie.png

单击此图像时,图像(及周围标记)将被iframe替换。

由于图像加载速度比Flash播放器快,因此即使有很多这样的缩略图,也可以快速加载页面。

[编辑]这是working example