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 的经验，也没有找到具体的示例来帮助我，所以无法真正弄清楚如何将 API 与 JS 一起使用。我已经阅读了它的大部分文档。

感谢您的宝贵时间。

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/