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/]

$ ./main
(42, 7, 19, 499, 727)

jquery - 改变宽度＆amp;通过按钮iframe的高度

1 个答案: