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

嘿，各位，我必须为我在这里的经验不足道歉，我已经为此工作了大约一个小时，但我对jQuery如此陌生，以至于我甚至不知道要搜索什么

我有一个页面（）上嵌入了多个YouTube视频。我正在尝试调整视频的大小，以根据分区的宽度动态填充它们所放置的分区（以便我以后可以选择更改它）。简单地输入--width: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>

#容器{宽度：30%；}
变量$vidPlayer=$（“嵌入”）；
var aspect=$vidPlayer.attr（“高度”）/$vidPlayer.attr（“宽度”）；
$（窗口）。调整大小（函数（）{
var playerWidth=$（“#容器”）.width（）；
$vidPlayer
.宽度（播放宽度）
.高度（播放器宽度*纵横比）；
}).触发（“调整大小”）；

目前我的页面上未实现此功能，但它确实适用于单个帖子。对于“permalink”，单条目发布，它工作得非常完美。然而，在视频索引中，每次发布5-10个视频，只有在所有视频的纵横比相同的情况下才有效。如果第一个视频是4:3（宽度：高度），则所有后续视频播放器的大小都将调整为4:3，即使视频应该是16:9或其他

我假设这是因为脚本搜索“嵌入”，一旦找到一个，它就停止搜索。它有变量，并将其应用于所有后续视频播放器，而不考虑尺寸

假设我一页有十个视频。其中五幅是标准的4:3纵横比图片，尺寸为640x480px。另外五个是16:9的纵横比；1280x720px。我需要让这个脚本检查每个脚本，然后根据每个脚本调整大小，对吗

我必须使用脚本，因为我可能会在将来更改设计布局（分区宽度），而且我还有大约40多个视频要发布

---

我甚至不知道在这里如何使用或使用什么函数。看起来，每一次或每一次都可能是很好的赌注，我试着把它们扔进去也没用。非常感谢您的帮助。

如果您希望独立计算每个

嵌入

元素的宽度，可以使用

.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");
});

---

如果希望为每个

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");
});