
.ub-video {
  background: #333;
  .player {
    padding: 0.5rem 0;
    text-align: center;
    width: 100%;
    position: relative;
    overflow:hidden;
    &:after{
      content:'';
      display: block;
      margin-top:40%;
    }
    #player {
      margin: 0 auto;
      max-width:100%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%
    }
  }
}

@media screen and (max-width: 40rem) {
  .ub-video {
    .player {
      &:after {
        margin-bottom: 60%;
      }
    }
  }
}

.ub-video-info {
  background: #FFF;
  border-radius: var(--size-radius);
  padding: var(--size-margin);
  .h1 {
    font-size: var(--font-size-large);
  }
  .stat {
    margin-top: var(--size-margin);
    a {
      color: #999;
      i {
        display: inline-block;
        width: 1em;
        text-align: center;
      }
      &:hover {
        color: #333;
      }
    }
  }
  .summary {
    margin-top: var(--size-margin,0.5rem);
    color: #999;
  }
}