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

Question

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

Я попытался это:

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

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

The $("#frame1") будет выбрать элемент с идентификатором атрибута frame1. Для справки: jQuery Selectors и ID Selector.

Update: Так как вы сказали, что идентификатор становится раздели, вы можете просто изменить, как селектор работает, и применить его ко всем плавающие фреймы:

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