Tristan Tristan - 15 days ago 8
Javascript Question

What is the best solution for this video layout?

I am building a website in WordPress, which has a page with 4 videos.

(Please see screenshot)

The top large video is its own video, and so are the three underneath.

I want to be able to click on one of the smaller videos underneath, then that replaces the top video, then the video that was at the top goes down to where the one I just clicked on was.

Does that make sense?

Please could someone advise me on how they would achieve this.

Thank you!


Answer

Maybe this is helpful. Here P is in place of 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>