#playlist-container {
  display: flex;
  padding-left: 1em;
  align-items: stretch
}
#active-video {
  flex: 1;
}
#playlist-container .video-playlist {
  width: 20%;
  overflow-y: auto;
}
#playlist-container .video-playlist-item {
  cursor: pointer;
  position: relative;
}
.video-playlist-item .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  display: flex;
  transition: all .2s ease;
}
.video-playlist-item .overlay > span {
  display: none;
}
.video-playlist-item.active .overlay > span {
  display: block;
  margin: auto;
}
.video-playlist-item.active .overlay,
.video-playlist-item:hover .overlay {
  transition: all .2s ease;
  opacity: 1;
}
.video-playlist-item .video-prev-container {
  /* padding: 1em; */
}
.video-prev-container .video-url {
  display: none;
}

@media all and (max-width: 1000px) {
  #playlist-container .video-playlist {
    width: 100%;
    overflow-x: auto;
  }
  .view-video-playlist > .view-content{
    display: flex;
    width: 1000em;
  }
}