<div class="wrap">
  <h1 class="video-heading"><span>Video</span></h1>
  <div class="video">
    <iframe id="mainVideo" width="560" height="315" src="https://www.youtube.com/embed/ScMzIvxBSi4" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
  <div class="side-panel">
    <ul>
      <li>
        <div><img class="swapVideo" data-video-url="https://player.vimeo.com/video/163721649" src="http://via.placeholder.com/162x108" alt="dummy pic" width="162" height="108"></div>
        <p>Bitcoin is like Coco-Cola</p>
      </li>
      <li>
        <div><img class="swapVideo" data-video-url="https://www.youtube.com/embed/ScMzIvxBSi4" src="http://via.placeholder.com/162x108" alt="dummy pic" width="162" height="108"></div>
        <p>Bitcoin is like Coco-Cola</p>
      </li>
      <li>
        <div><img src="http://via.placeholder.com/162x108" alt="dummy pic" width="162" height="108"></div>
        <p>Bitcoin is like Coco-Cola</p>
      </li>
      <li>
        <div><img src="http://via.placeholder.com/162x108" alt="dummy pic" width="162" height="108"></div>
        <p>Bitcoin is like Coco-Cola</p>
      </li>
      <li>
        <div><img src="http://via.placeholder.com/162x108" alt="dummy pic" width="162" height="108"></div>
        <p>Bitcoin is like Coco-Cola</p>
      </li>
      <li>
        <div><img src="http://via.placeholder.com/162x108" alt="dummy pic" width="162" height="108"></div>
        <p>Bitcoin is like Coco-Cola</p>
      </li>
      <li>
        <div><img src="http://via.placeholder.com/162x108" alt="dummy pic" width="162" height="108"></div>
        <p>Bitcoin is like Coco-Cola</p>
      </li>
      <li>
        <div><img src="http://via.placeholder.com/162x108" alt="dummy pic" width="162" height="108"></div>
        <p>Bitcoin is like Coco-Cola</p>
      </li>
      <li>
        <div><img src="http://via.placeholder.com/162x108" alt="dummy pic" width="162" height="108"></div>
        <p>Bitcoin is like Coco-Cola</p>
      </li>
      <li>
        <div><img src="http://via.placeholder.com/162x108" alt="dummy pic" width="162" height="108"></div>
        <p>Bitcoin is like Coco-Cola</p>
      </li>
    </ul>
  </div>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #ccc;
}
.wrap {
  max-width: 1180px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  background: #fff;
}
.video-heading {
  margin: 0;
  font-size: 2rem;
  font-size: 10vw;
  width: 10vw;
  align-self: center;
  text-align: center;
  line-height: 1.5;
}

.video-heading span {
  transform: rotate(-90deg) translateY(-50%);
  transform-origin: center;
  display: inline-block;
}
.video {
  flex: 1 0 0%;
  margin: 0 15px;
  padding-top: 56.25%;
  position: relative;
}
.video iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.side-panel {
  width: 164px;
  border: 1px solid #ccc;
  position: relative;
}
.side-panel ul {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
  overflow-x: hidden;
  border: 1px solid #ccc;
}
.side-panel li {
  margin: 0 0 20px;
  font-size: 1.2rm;
  color: #ccc;
}
.side-panel img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}
.side-panel p {
  padding: 0 5px;
}
.side-panel img.active {
  border: 1px solid red;
}
@media screen and (max-width: 860px) {
  .video {
    margin: 0 0 15px;
  }
  .side-panel {
    width: 100%;
    flex: 1 0 100%;
  }
  .side-panel ul {
    position: static;
    overflow: auto;
    display: flex;
  }
  .side-panel li {
    min-width: 165px;
    margin: 0 20px 0 0;
  }
}

(function(d) {
  "use strict";
  var videoPlayButtons = document.querySelectorAll(".swapVideo"),
    video = document.getElementById("mainVideo"),
    videos = videoPlayButtons.length;
  function swapVideo() {
    video.src = this.getAttribute("data-video-url");
    removeActive();
    this.classList.add("active");
  }
  function removeActive() {
    for (var i = 0; i < videos; i++) {
      videoPlayButtons[i].classList.remove("active");
    }
  }

  for (var i = 0; i < videos; i++) {
    videoPlayButtons[i].addEventListener("click", swapVideo);
  }
})(document);