jquery - 通过按钮更改iframe的宽度和高度

Question

我一直在试图模仿嵌入式iframe的youtube视频的电影模式功能。这个想法是减少在博客文章中占据的空间嵌入视频，但仍然为读者提供了放大视频而无需全屏显示的可能性。

它应该工作的方式是在视频旁边显示一个按钮。点击它可以将视频放大到一定的大小，再次点击可以缩小视频大小。

我想我得到了功能下来，但它不能正常工作，我不明白为什么。你会看到我的代码不是最有效的，但它仍然应该工作。那么，它不会。

如果你想，用这个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();