.vjs-default-skin .vjs-big-play-button {
  /* The font size is what makes the big play button...big. 
     All width/height values use ems, which are a multiple of the font size.
     If the .video-js font-size is 10px, then 3em equals 30px.*/
  font-size: 3em;

  /* We're using SCSS vars here because the values are used in multiple places.
     Now that font size is set, the following em values will be a multiple of the
     new font size. If the font-size is 3em (30px), then setting any of
     the following values to 3em would equal 30px. 3 * font-size. */

  line-height: 1.5em;
  height: 1.5em;
  width: 1.5em;

  /* 0.06666em = 2px default */
  border: 0;
  /* 0.3em = 9px default */
  border-radius: 50%;

  /* Align center */
  left: 50%;
  top: 50%;
  margin-left: -(1.5em / 2);
  margin-top: -(1.5em / 2);
}

.video-js .vjs-control-bar {
  /* .video-js .vjs-big-play-button, */
  /* .video-js .vjs-menu-button .vjs-menu-content { */
  /* background-color: $primary-background-color; */
  /* Opacity: 1.0 = 100%, 0.0 = 0% */
  /* background-color: rgba($primary-background-color, 0.7); */
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}