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”，一旦找到它，它就会停止搜索。它具有变量，无论尺寸如何，它都会将它们应用于所有后续视频播放器。

假设我在一个页面上有十个视频。其中五个是您标准的4：3宽高比图片，尺寸为640x480px。其他五个是16：9的宽高比; 1280x720像素。我需要让这个脚本检查每个脚本，然后根据个人情况调整大小，对吗？

我必须使用脚本，因为我将来可能会更改设计布局（分区宽度），而且我还有大约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");
});

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

1 个答案: