jQuery - изменение размера нескольких объектов, ширина и высота связаны

Question

Привет, ребята, я должен извиниться за свою неопытность здесь, я работал над этим около часа, но я так новичок в jQuery, t даже знаю что для поиска ...

У меня есть страница (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> 

Это в настоящее время не реализован на моей странице, но делает работы для отдельных проводок. Для «permalink», однопозиционных сообщений, он работает отлично. Тем не менее, по индексу видео, где 5-10 видео будут размещаться одновременно, это будет работать, только если все видео имеют одинаковое соотношение сторон. Если первое видео составляет 4: 3 (ширина: высота), то все последующие видеоплееры получат размер 4: 3, даже если видео должно быть 16: 9 или что-то еще.

Я предполагаю, что причиной этого является то, что сценарий ищет «вставлять», и как только он находит его, он прекращает поиск. Он имеет переменные, и он применяет их ко всем последующим видеоплеерам независимо от размеров.

Предположим, у меня есть десять видеороликов на странице. Пять из них - ваши стандартные 4: 3 аспектные изображения с размерами 640x480 пикселей. Остальные пять - соотношение сторон 16: 9; 1280x720 пикселей. Мне нужно, чтобы этот скрипт проверял каждый, а затем изменял размер на индивидуальной основе, не так ли?

Мне нужно использовать скрипт, потому что в будущем я могу изменить макет дизайна (ширина раздела), и у меня есть около сорока или более видео для публикации.

Я даже не знаю как или что функции, используемые здесь. Похоже, что .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"); 
});