body {
    background: rgb(10,10,10);
  }

  .frame {
      background:rgba(30,30,30,.7);
      width:60%;
      padding:1em;
      margin:1em auto;
  }

  .center-vert {
      position: relative;
      top: 50%;
      z-index:1; 
  }

  img {
      max-width: 100%; 
      cursor: pointer;
  }

  .resp-container {
      position: relative;
      overflow: hidden;
      padding-top: 56.25%;
  }

  .resp-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
  }

  #player-controls
  {
      height: 100%;
      width: 100%;
      overflow: hidden;
  }

  .control
  {
      width: 33.333%;
      float: left;
      padding: 12px 0;
  }

  .button
  {
      width: 26px;
      height: 26px;
      padding: 25px;
      background-color: rgb(10,10,10);
      border-radius: 6px;
      cursor: pointer;
  }

  .button i
  {
      display: block;
      color: #d6dee7;
      font-size: 26px;
      text-align: center;
      line-height: 1;
  }

  .button, .button i
  {
      transition: 0.2s ease all;
  }

  .button:hover
  {
      background-color: #d6d6de;
  }

  .button:hover i
  {
      color: #fff;
  }

  .shrink:hover
  {
      -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
      transform: scale(0.8);
  }