lumbung-theme/static/css/video-box.css

:root {
  --video-border-color: burlywood;
  --video-background-color: antiquewhite;
}
  .video-box {
      border:2px solid var(--video-border-color);
      max-width:560px;
      margin:auto;
      box-shadow:1em 1em 0 #d2d1c8;
      margin-bottom: 2em;
      color: chocolate;
    }

  .video-box:nth-child(even){
    transform: rotate(-1deg);
  }

  .video-box:nth-child(odd){
    transform: rotate(1deg);
  }

  .video-box:nth-child(5){
    transform: rotate(3deg);
  }


  .video-box img {
    max-width: 100%;
  }

  .video-box iframe {
    max-width: 100%;
}

  .video-box .media {
    line-height: 0;
  }

  .video {
    background-color: var(--video-background-color);
  }

  .video .metadata{
    font-size:0.9rem;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .metadata .title{
    margin-top:0;
    border-top: 2px solid var(--video-border-color);
    border-bottom: 2px solid var(--video-border-color);
    padding:0.5em;
    font-weight:700;
    font-size:1.3rem;
    flex-basis: 100%;
  }

  .video.channel{
    border-right: 2px solid var(--video-border-color);
    padding: 0.5em 0.9em 0.5em 0.9em;
    font-size: 0.8rem;
  }

  .video.date {
    float:right;
    border-left: 2px solid var(--video-border-color);
    padding: 0.5em 0.9em 0.5em 0.9em;
    font-size: 0.8rem;
  }

  .video.description {
    border-top: 2px solid var(--video-border-color);
    padding: 0.8em 0.8em 0.8em 0.8em;

  }
  .descr_button a {
    color:inherit;
    text-decoration: inherit;
  }

  input.descr_button {
    display: none;
  }

  input + label + .video.date + .description{
    display: none;
  }

  input:checked + label + .video.date +.description {
    display: block;
  }

  .play-icon {
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%) scale(.5);
      border-top: 13px solid transparent;
      border-bottom: 13px solid transparent;
      border-left: 18px solid hsla(0,0%,100%,.95);
  }

  .video-thumbnail {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
  }
    .video-thumbnail {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background-color: #ececec;
    transition: filter .2s ease;
  }
    
.video-thumbnail-duration-overlay {
  display: inline-block;
  background-color: var(--video-background-color);
  color: chocolate;
  font-size: 14px;
  line-height: 1.1;
  z-index: 10;
  position: absolute;
  padding: 1px 3px 1px 3px;
  right: 5px;
  bottom: 5px;
  border: 2px solid var(--video-border-color);
  }

  .play-overlay {
    transition: all .2s ease;
    position: absolute;
    right: 0;
    bottom: 0;
    width: inherit;
    height: inherit;
    opacity: 0;
    background-color: rgba(0,0,0,.3);
    cursor: pointer;
  }

.video-thumbnail:hover {
  text-decoration:none!important
}
.video-thumbnail:hover .play-overlay {
opacity:1
}
.video-thumbnail:hover .play-overlay .play-icon {
transform:translate(-50%,-50%) scale(1)
}