jquery изменить размер родительского дочернего элемента

У меня есть контейнер div с встраиванием класса и уникальным идентификатором. Внутри контейнера div у меня есть встроенный код плеера, использующий iframe или объект. Бывший:

<div class="embed" id"id21" style="width:480px; height:390px;">
<iframe width="480" height="390" src="http://www.youtube.com/embed/Oe_3KgfcCXs" frameborder="0" allowfullscreen></iframe>
</div>

Когда я изменяю размер контейнера div, я хочу, чтобы игрок внутри него также изменил размер. Код встраивания имеет атрибуты ширины и высоты. Я сделал следующее, но не смог заставить его работать. Мне нужно ссылаться на контейнер по его идентификатору, поэтому, если у меня есть другой контейнер с другим идентификатором, изменение размера должно влиять только на изменяемый размер контейнера, а не на другие контейнеры.

$('.embed').live({
    resize: function(event, ui) {
        var id = this.id;
        var height = $(id).height();
        var width = $(id).width();
        $(id).contents().attr({'width':width,'height':height});
    }
});

jquery resize
person Hussein    schedule 06.02.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward 

$('.embed').live({
    resize: function(event, ui) {
        $(this).find("iframe").css(ui.size);
    }
});

Разве это не работает?

person Luke    schedule 06.02.2011
comment
Отличный однострочный ответ. Но что, если плеер встроен с использованием объекта, а не iframe. Нам нужно проверить как iframe, так и объект. - person Hussein; 06.02.2011
comment
затем используйте разделение запятыми, .find (iframe, любой элемент) - person Luke; 06.02.2011
comment
... или просто children(), если в элементе .embed есть только один дочерний элемент - person Šime Vidas; 06.02.2011
comment
да, ты прав, Шиме, но мне нравится контролировать то, что я контролирую :) - person Luke; 06.02.2011

arrow_upward
2
arrow_downward

Если вы используете CSS для управления height и width iframe в относительных размерах, скажем %, то изменение размера div автоматически изменит размер iframe:

iframe {
    height: 80%;
    width: 100%;
    margin: 0 auto;
}

Это будет работать, только если .embed имеет, как в вашем примере, определенные размеры.

Отредактировано, чтобы изменить html, css и предоставить демонстрационный jQuery:

html:

<div class="embed" id="id21" style="width:480px; height:390px;">
    <iframe src="http://www.youtube.com/embed/Oe_3KgfcCXs" frameborder="0" allowfullscreen></iframe>
</div>

css

.embed {
    border: 5px solid #000;
    padding: 1em;
}

.embed:hover {
    border-color: #f90;
}

iframe {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

jQuery:

$('.embed').resizable(
    {
        aspectRatio: 1.23,
        minHeight: 390,
        minWidth: 480
     });

Демонстрация JS Fiddle.

person David says reinstate Monica    schedule 06.02.2011
comment
Хорошая мысль. +1 за это. Ваш способ означает, что мне также нужно изменить высоту ширины iframe по умолчанию на 100%, прежде чем это может сработать. А это значит больше кода. По умолчанию для ютубов - 480x390. - person Hussein; 06.02.2011

arrow_upward
1
arrow_downward

Попробуй это:

$('.embed').live({
    resize: function(event, ui) {
        $(this).children()
            .width( $(this).width() )
            .height( $(this).height() );
    }
});
person Šime Vidas    schedule 06.02.2011