jquery - Breite und Höhe des iFrame über die Schaltfläche ändern

Question

Ich habe versucht, die Cinema-Modus-Funktion von Youtube-Videos für eingebettete iFrames nachzuahmen. Die Idee ist es, die Anzahl der in Videos eingebetteten Videos in einem Blog-Post zu reduzieren, aber den Lesern immer noch die Möglichkeit zu bieten, das Video zu vergrößern, ohne in den Vollbildmodus zu wechseln.

Die Art, wie es funktionieren soll, ist mit einer Schaltfläche, die neben dem Video angezeigt wird. Wenn Sie darauf klicken, wird das Video auf eine bestimmte Größe vergrößert. Wenn Sie es erneut anklicken, wird es verkleinert.

Ich denke, ich habe die Funktionalität runter, aber es funktioniert nicht richtig, und ich kann nicht herausfinden, warum. Sie werden sehen, dass mein Code nicht der effizienteste ist, aber er sollte trotzdem funktionieren. Nun, das tut es nicht.

Wenn Sie möchten, verwenden Sie diese jfiddle (https://jsfiddle.net/rjroy8eo/7/) oder den Code unten finden:

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

Was ich mache falsch?

Answer 1

Fest. Ich fühle mich dumm. Die Variable enthielt keine Klammern. [https://jsfiddle.net/rjroy8eo/8/]

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