css custom.player.css

Posted 2021-05-13

/* 
  The following rule sets the
  size of the player
*/
.video-js {
  width: 640px;
  height: 360px;}
/*****************************/
/*****************************/
/*
  The following TWO rules set
  the location and size of
  the big play button
*/
/* 
  This rule sets the color,
   opacity, size and position of the
   big play button 
*/
.video-js.vjs-mouse .vjs-big-play-button {
  background-color: #000000;
  opacity: .8;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  border-style: solid;
  border-width: 5px;
  border-color: #FFFFFF;
  margin-left: -10%;
  box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.75);
}
/* 
  This rule sets the location and size
  of the triangular play icon in the
  big play button 
*/
.video-js.vjs-mouse .vjs-big-play-button:before {
  font-size: 1.5em;
  color: white;
  opacity: .9;
  margin-top: 14%;
  margin-left: 1%
}