jquery - change width & height of iframe via button

I've been trying to mimic the cinema mode functionality of youtube videos for embedded iframes. The idea is to decrease space embedded videos take up in a blog post, but still offer readers the possibility to enlarge the video without having to go fullscreen.

The way it's supposed to work is with a button that is displayed alongside the video. Clicking on it enlarges the video to a certain size, clicking it again downsizes it.

I think I got the functionality down, but it's not working properly, and I can't figure out why. You'll see my code isn't the most efficient, but it still should work. Well, it doesn't.

If you want, use this jfiddle (http://ift.tt/1Zuc2yY) or find the code below:

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

What am I doing wrong?