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