.video-js.vjs-asisi-skin {
  font-size: 1rem;
  color: #fff;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::before, .video-js .vjs-play-control .vjs-icon-placeholder::before, .vjs-icon-play::before {
	content: "";
}

/* The "Big Play Button" is the play button that shows before the video plays.
To center it set the align values to center and middle. The typical location
of the button is the center, but there is trend towards moving it to a corner
where it gets out of the way of valuable content in the poster image.*/
/*
<svg  width="82" height="82" viewBox="0 0 102 102">
<circle class="st0" cx="41" cy="41" r="39" style="opacity:0.3;fill:#898A8A;" />
<circle class="st1" cx="41" cy="41" r="39.4" style="fill:none;stroke:#FFFFFF;stroke-width:3.1793;stroke-miterlimit:10"/>
<path class="st2" d="M55.4,40L27.8,23.9C27,23.5,26,24,26,24.9v32.2c0,0.9,1,1.5,1.8,1L55.4,42C56.2,41.6,56.2,40.5,55.4,40z" style="fill:#FFFFFF"/>
</svg>
*/

.vjs-asisi-skin .vjs-big-play-button::before {
  content: url("data:image/svg+xml,%3Csvg width='100px' height='100px' viewBox='0 0 102 102' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle class='st0' cx='41' cy='41' r='39' style='fill:%23898A8A;opacity:0.3' /%3E%3Ccircle class='st1' cx='41' cy='41' r='39.4' style='fill:none;stroke:%23FFFFFF;stroke-width:3.1793;stroke-miterlimit:10'/%3E%3Cpath class='st2' d='M55.4,40L27.8,23.9C27,23.5,26,24,26,24.9v32.2c0,0.9,1,1.5,1.8,1L55.4,42C56.2,41.6,56.2,40.5,55.4,40z' style='fill:%23FFFFFF'/%3E%3C/svg%3E");
}
  
.vjs-asisi-skin .vjs-big-play-button {
  display: block;
  width:84px;
  height:84px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  margin-left: -42px;
  margin-top: -42px;
  cursor:pointer;
  border:none;
  transition: all .5s;
  border:none;
  background: transparent;
}

.vjs-asisi-skin.vjs-has-started .vjs-big-play-button {
  display: none;
}
.vjs-asisi-skin.vjs-paused .vjs-big-play-button {
  display: block;
}
.vjs-asisi-skin .vjs-poster {
  outline: none;
}
.vjs-asisi-skin.video-js.vjs-ended .vjs-poster {
  display: block;
}
.vjs-asisi-skin:hover .vjs-big-play-button {
  background: transparent;
}
.vjs-asisi-skin:hover .vjs-big-play-button:before {
  background: transparent;
}
.vjs-asisi-skin .vjs-control {
  cursor:pointer;
}
.vjs-asisi-skin .vjs-control-bar {
  /* display: none; */
}

.vjs-youtube-mobile.vjs-has-started .vjs-big-play-button {
  display: none !important;
}