Изменить ширину и высоту iframe с помощью jQuery?

Я пробовал решение, которое я нашел на этом веб-сайте. Однако это не сработало для меня. Я думаю, что есть script, который устанавливает это где-то еще, поэтому мне нужно добавить код на странице, чтобы переопределить стиль.

Я пробовал это:

<script type="text/javascript">
    $(document).ready(function () {
        $("#frame1").width(578);
        $("#frame1").height(326);
    });
</script>

Однако html все еще выглядит следующим образом:

<iframe frameborder="0" src="http://player.vimeo.com/video/20657168?color=fc030f" style="width: 500px; height: 281.25px;"></iframe>

Я хочу, чтобы width был 578, а height - 326. Вот веб-сайт: http://beckindesigns.tumblr.com/

P.S. Если я добавлю класс или ID, он удалит его из html. Я использую Tumblr..

Ответ 1

Он будет работать, если вы добавите id="frame1" в свой iframe.

<iframe frameborder="0" id="frame1" src="http://player.vimeo.com/video/20657168?color=fc030f" style="width: 500px; height: 281.25px;"></iframe>

$("#frame1") выберет элемент с атрибутом id frame1. Для справки: селектор jQuery и идентификатоp > .

Обновление:. Поскольку вы сказали, что идентификатор удаляется, вы можете просто изменить способ работы селектора и применить его ко всем iFrames:

<script type="text/javascript">
    $(document).ready(function () {
        $("iframe").width(678);
        $("iframe").height(526);
    });
</script>

Если на странице есть несколько iFrames, и вы не хотите, чтобы они были одного размера, вы можете использовать селектор : eq (index), который будет соответствие по индексу на основе нуля. Поэтому, если на странице есть два iFrames и только хотите изменить второй, используйте:

<script type="text/javascript">
    $(document).ready(function () {
        $("iframe:eq(1)").width(678);
        $("iframe:eq(1)").height(526);
    });
</script>