javascript嵌入youtube视频 [英] javascript embedded youtube video

问题描述

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

I'm writing HTML pages for a custom app. I'd like to embed youtube videos on my page. I'm aware of youtube API and I have used it in python. I'm a newbie in JS and my knowledge on html is small.

仅仅嵌入一个 youtube 视频，很容易，现在的事情是有一些我无法满足的重要要求，如下所列:

To just embed a youtube video, is pretty easy, the thing now is that there are some important requirements I cannot fulfill, listing bellow:

1) 我需要视频播放器在待机"状态时非常小，例如 100x70 像素.通过简单地嵌入视频并固定大小来执行此操作时，youtube 的皮肤将获得所有空间，而不仅仅是缩略图.

1) I need the video player when in "standby", to be pretty small such as 100x70 pixels. When doing that by simply embedding the video and fixing the size, the youtube's skin gets all the space, instead of only having the thumbnail.

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

2) 当点击缩略图时，我希望玩家占用更多空间来扩展它的限制.不过，这是另一个话题，只是提一下，以防有一个简单的解决方案可以解决这两个问题.

2) When the thumbnail is clicked, I'd like for the player to take some more space expanding it's limits. That's another topic though, just mentioning it in case there is a simple solution that solves both.

我尝试使用 youtube 的 api，但由于我对 JS 没有经验，也没有找到具体的示例来帮助我，无法真正弄清楚如何将 API 与 JS 一起使用.我已经阅读了大部分文档.

I tried to use the youtube's api, but as I'm not experienced with JS and I didn't find a specific example to help me out, couldn't really figure how to use the API with JS. I have read a big part of it's documentation.

感谢您抽出宝贵时间.

推荐答案

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

Try putting your video inside a container (like a div) with fixed dimensions instead of setting the dimension inside the tag. This way you can use jQuery to change the size of the container itself instead of the .

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 的简单函数:

Simple function with jQuery:

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

查看更多信息:http://api.jquery.com/click/

这篇关于javascript嵌入youtube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！