jquery - jQuery —调整多个对象的大小，链接宽度和高度比例

Question

大家好，对于这里的经验我要深表歉意，我已经为此工作了大约一个小时，但是我对jQuery非常陌生，甚至不知道要搜索什么。

我有一个页面(http://milliondollarextreme.tv/)，上面嵌入了多个YouTube视频。我正在尝试根据分区的宽度动态调整视频的大小，以填充其所处的分区(以便我可以选择稍后进行更改)。简单地说-宽度:100％； -适用于宽度，但视频不保持其纵横比。因此，我使用了以下脚本:

#container {width:30%;} 
<script>
var $vidPlayer = $("embed");
var aspect = $vidPlayer.attr("height") / $vidPlayer.attr("width");
    $(window).resize(function() {
          var playerWidth = $("#container").width();
          $vidPlayer
            .width(playerWidth)
            .height(playerWidth * aspect);
    }).trigger("resize");
</script>

目前我的页面上尚未实现此功能，但确实适用于单个帖子。对于“永久链接”，单项过帐，它可以完美地工作。但是，在视频索引中，一次将发布5-10个视频，只有在所有视频的纵横比都相同的情况下，该索引才有效。如果第一个视频是4:3(宽度:高度)，则所有后续视频播放器的大小都会调整为4:3，即使该视频应该是16:9或其他。

我假设这样做的原因是该脚本搜索“embed”，并且一旦找到一个“embed”，它将停止搜索。它具有变量，并且将其应用于所有后续视频播放器，而不管其尺寸如何。

假设我一页上有十个视频。其中五张是您的标准4:3宽高比图片，尺寸为640x480px。其他五个是16:9的宽高比； 1280x720px。我需要让此脚本检查每个脚本，然后分别调整大小，对吗？

我必须使用脚本，因为将来可能会更改设计布局(划分宽度)，并且我要发布大约40多个视频。

我什至不知道如何或在这里使用什么功能。看起来.each或.live可能是不错的选择，我试图将它们扔在那里，但无济于事。任何帮助将不胜感激。

Answer 1

如果希望为每个embed元素独立地计算宽度，则可以使用.each()函数迭代它们。

var $vidPlayer = $("embed");
var playerWidth = $("#container").width();

$vidPlayer.each(function(){
    var $this = $(this);
    var aspect = $this.attr("height") / $this.attr("width");

    $(window).resize(function() {
          $this.width(playerWidth).height(playerWidth * aspect);
    }).trigger("resize");
});