javascript - javascript嵌入式youtube视频

Question

我正在为自定义应用程序编写HTML页面。我想在页面上嵌入YouTube视频。我知道youtube API，并且已在python中使用它。我是JS的新手，对html的了解很少。

仅仅嵌入一个youtube视频是非常容易的，现在的事情是有些我不能满足的重要要求，下面列出:

1)在“待机”状态下，我需要视频播放器非常小，例如100x70像素。通过简单地嵌入视频并固定大小来做到这一点时，youtube的皮肤将获得所有空间，而不仅仅是缩略图。

    <embed
    width="120" height="72"
    src="http://www.youtube.com/v/XGSy3_Czz8k"
    type="application/x-shockwave-flash">
    </embed>

2)单击缩略图时，我希望播放器占用更多空间以扩展其限制。但是，这是另一个主题，如果有一个简单的解决方案可以同时解决这两个问题，则只需提及它。

我尝试使用youtube的api，但是由于我对JS不熟悉，并且没有找到帮助我的具体示例，因此无法真正确定如何在JS中使用API​​。我已经阅读了大部分文档。

感谢您的时间。

Answer 1

尝试将视频放入具有固定尺寸的容器(例如div)中，而不要在标签内设置尺寸。这样，您可以使用jQuery更改容器本身的大小，而不是。

HTML:

<div id="container" style="width: 100px; height: 70px;"><embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed></div>

jQuery的简单功能:

$( "#container" ).click(function() {
  $(this).css("width", "420px");
  $(this).css("height", "345px");
});

进一步了解:
http://api.jquery.com/click/