<div class="videos-container">
  
  <div class="video-player">
    your videos will play here
  </div>
  
  <div class="video-choices">
    your video thumbnail/links will go here
  </div>
  
</div>
body {
  background: #1e3c72;
  background: linear-gradient(to right, #1e3c72, #2a5298);
  padding: 30px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.videos-container {
  background: #333;
  padding: 10px;
  box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.25);
  color: #FFF;
}

.video-player   {
  min-height: 300px;
  width: 100%;
  background: #000;
  margin-bottom: 10px;
}

.video-choices  {
  display: flex;
  
  :not(:last-child) {
    margin-right: 5px;
  }
  
  img {
    height: 100px;
  }  
}
View Compiled
// the moves you can use are on this API, make a GET request to see all movies
const api= "https://scotch-mvplayer-api.herokuapp.com/api/v1"

// HAVE FUN! USE WHATEVER TOOL YOU WANT!
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.