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();