这种视频布局的最佳解决方案是什么？

Question

我正在WordPress中建立一个网站，其网页包含 4个视频。

（请参见截图）

最大的视频是自己的视频，下面的三个视频也是如此。

我希望能够点击下面的一个较小的视频，然后替换顶部的视频，然后顶部的视频下降到我刚刚点击的视频。

这有意义吗？

请有人可以告诉我他们将如何实现这一目标。

谢谢！

Answer 1

也许这很有帮助。这里P取代VIDEO

$(".videos figure").not(":first").click(function() {
  
  var elem = $(this),
      container = $(".videos"),
      target = container.find("figure").first(),
      targetContent = target.html(),
      thisContent = elem.html();
  
  target.html(thisContent);
  elem.html(targetContent);
  
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* simple flexbox layout */

section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding: 2em;
}
section figure {
  background-color: silver;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.3334%;
      -ms-flex: 0 0 33.3334%;
          flex: 0 0 33.3334%;
}
section figure:nth-child(1) {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 100%;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
}

/* just for visual styling */

section figure p {
  box-shadow: 0 0 0 0.125em white;
  padding: 2em;
}
section figure p.one {
  background-color: yellow;
}
section figure p.two {
  background-color: pink;
}
section figure p.three {
  background-color: orange;
}
section figure p.four {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="videos">
  <figure>
    <p class="one">
      1
    </p>
  </figure>
  <figure>
    <p class="two">
      2
    </p>
  </figure>
  <figure>
    <p class="three">
      3
    </p>
  </figure>
  <figure>
    <p class="four">
      4
    </p>
  </figure>
</section>