jquery - изменить ширину и высоту iframe с помощью кнопки

Question

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

Способ, которым он должен работать, - это кнопка, которая отображается вместе с видео. Нажатие на него увеличивает видео до определенного размера, щелчок по нему снова уменьшает его размер.

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

Если вы хотите использовать этот jfiddle (https://jsfiddle.net/rjroy8eo/7/) или найти код ниже:

HTML:

<iframe width="425" height="239" frameborder="0" allowfullscreen></iframe> 
<button type="button" class="video big">Enlarge</button> 
<button type="button" class="video small">Downsize</button> 

CSS

.video { 
    margin: 20px 20px 0px 0px; 
    width: 90px; 
    border: 0px solid black; 
    border-radius: 10px; 
    padding: 5px; 
    cursor: pointer; 
    background-color: black; 
    color: white; 
    float: left; 
} 

.small { 
    display: none; 
} 

JQuery

$(".video").click(function() { 

    var n = $("iframe").width; 

    if (n < 500) { 
    $("iframe").width(850).height(478); 
    $(".big").toggle(); 
    $(".small").toggle(); 
    } else { 
    $("iframe").width(425).height(239); 
    $(".small").toggle(); 
    $(".big").toggle(); 
    } 
}); 

Что я делаю неправильно?

Answer 1

Исправлено. Я чувствую себя глупым. В переменной отсутствовали скобки. [https://jsfiddle.net/rjroy8eo/8/]

var n = $("iframe").width();