/*
.video-js{
  width: 960px;
  height: 590px;
  margin: auto;
}
  */
.class-player {
  position: relative;
  background-color: antiquewhite;
  width: 90vw;
  height: auto;
  margin: auto;
}

.video-js {
  position: absolute;
  background-color: rgb(209, 49, 70);
  width: auto;
  height: 50vw;
  margin: auto;
}

/* it is for button play on the poster that appear at the beginning and it's center */
/* it's probably for css imported from network for css class: ".vjs-big-play-button" and it's adjusted */
.video-js .vjs-big-play-button {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  /*
  below it's parameter for the button
  */
  /*
  width: 80px !important;
  height: 80px !important;  
  -webkit-border-radius: 0.8em !important;
  -moz-border-radius: 0.8em !important;
  border-radius: 1.9em !important;
  */
}

/* below is for higher size than 1400px so it will reduce the size of the video */
@media screen and (min-width:1400px) {
  .class-player {
    position: relative;
    background-color: antiquewhite;
    width: 60vw;
    height: auto;
    margin: auto;
  }

  .video-js {
    position: absolute;
    background-color: rgb(209, 49, 70);
    width: auto;
    height: 30vw;
    margin: auto;
  }
}

/*
@media screen and (max-width: 1080px) {
  .video-js{
    width: 1920px;
  height:1080px;
  }
}
@media screen and (max-width: 900px) {
  .video-js{
    width: 300px;
  height:154px;
  }
}

@media screen and (max-width: 550px) {
  .video-js{
    width: 240px;
    height:120px;
  }
}
  */