jQuery -- resize multiple objects, width and height scale linked

Question

Hey folks, I have to apologize for my inexperience here, I've been working on this for about an hour but I'm so new to jQuery that I don't even know what to search for...

I've got a page (http://milliondollarextreme.tv/) that has multiple YouTube video embeds on it. I am trying to make the videos resize to fill the divisions that they are placed in, dynamically, according to that division's width (so that I have the option to change it later). Simply putting in -- width: 100%; -- will work for the width, but the videos don't maintain their aspect ratio. So I used the following script:

#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>

This is currently not implemented on my page, but it does work for single postings. For the 'permalink', single entry postings, it works perfectly. However, on the index of videos, where 5-10 videos are going to be posted at a time, it will only work if all the videos are the same aspect ratio. If the first video is 4:3 (width:height), then all subsequent video players get resized 4:3, even if the video is supposed to be 16:9, or something else.

I'm assuming that the reason for this, is that the script searches for "embed", and once it finds one, it stops searching. It has the variables, and it applies them to all subsequent video players regardless of the dimensions.

Let's say I've got ten videos on a page. Five of them are your standard 4:3 aspect pictures, with dimensions like 640x480px. The other five are 16:9 aspect ratio; 1280x720px. I need to make this script check each one then resize on an individual basis, right?

I've got to use a script because I might change the design layout (division width) in the future, and I have about forty or so more videos to post.

I don't even know how or what functions to use here. It looks like .each or .live might be good bets, and I tried tossing them in there to no avail. Any help would be hugely appreciated.

Answer 1

If you want the widths to be calculated independently for each of the embed elements, you can use the .each() function to iterate through them.

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