更好的方法来实现将iframe切换到整页屏幕并返回小？

Question

所以现在，我有一个3x3的iframe。我添加了div并将它们叠加在视频上，然后单击divs。它似乎工作但是：1。）我不能让它恢复到正常大小。一种切换的东西。

$(document).ready(function() {
  var height = $(window).height();
  var width = $(window).width();

  $('.div1').on("click", function() {
    $(this).next('.video').css({
      'height': height,
      'width': width,
      'position': 'absolute',
      'z-index': '2'
    });
  });
});

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
.main-content {
  height: 100%;
  width: 100%;
  padding-bottom: 0px;
  display: flex;
  flex-direction: center;
  align-items: center
}
.flex-videos {
  display: flex;
  flex-direction: row;
  height: 33%;
  width: 100%;
  min-width: 960px;
  overflow: hidden;
  margin: 0;
  li {
    list-style: none;
    width: 100%;
    height: 100%;
    margin: 0;
  }
}
.div1 {
  display: inline-block !important;
  position: absolute;
  z-index: 3;
  height: 256px;
  width: 480px;
}
.flex-video-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 800px;
}
.video {
  top: 0;
  left: 0;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main-content">
  <div class="flex-video-container" id="contentDiv">
    <ul class="flex-videos">
      <li>
        <div class="div1"></div>
        <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
      </li>
      <li>
        <div class="div1"></div>
        <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
      </li>
      <li>
        <div class="div1"></div>
        <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
      </li>
    </ul>
    <ul class="flex-videos">
      <li>
        <div class="div1"></div>
        <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
      </li>
      <li>
        <div class="div1"></div>
        <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
      </li>
      <li>
        <div class="div1"></div>
        <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
      </li>
    </ul>
    <ul class="flex-videos">
      <li>
        <div class="div1"></div>
        <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
      </li>
      <li>
        <div class="div1"></div>
        <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
      </li>
      <li>
        <div class="div1"></div>
        <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe>
      </li>
    </ul>
  </div>
</div>

Here's a jsfiddle to show what I currently have.

Answer 1

以下代码应该做你想要的。检查视频是否被放大并移除内联css，以便它恢复到正常大小。否则视频会被放大。

（文档）$。就绪（函数（）{

  var height = $(window).height();
  var width = $(window).width();
  var enlarged = false;
  $('.div1').on("click", function(){
  if(!enlarged){
     $(this).next('.video').css({'height': height, 'width': width, 'position': 'absolute', 'z-index':'2'});
     enlarged = true;
  }
  else{
    $(this).next('.video').attr('style', '');
    enlarged = false;
    }
  });
});