:root {
  --theme-color-primary: #656DE6;
  --theme-color-primary-dark: #9197ed;
  --theme-color-primary-light: #3943df;
}
.ub-video {
  background: #333;
}
.ub-video .player {
  padding: 0.5rem 0;
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.ub-video .player:after {
  content: '';
  display: block;
  margin-top: 56%;
}
.ub-video .player #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);
}
.ub-video-info .h1 {
  font-size: var(--font-size-large);
}
.ub-video-info .stat {
  margin-top: var(--size-margin);
}
.ub-video-info .stat a {
  color: #999;
}
.ub-video-info .stat a i {
  display: inline-block;
  width: 1em;
  text-align: center;
}
.ub-video-info .stat a:hover {
  color: #333;
}
.ub-video-info .summary {
  margin-top: var(--size-margin, 0.5rem);
  color: #999;
}