:root{
--videobutton-bg-color:#eeeeee;
--videobutton-border-color:#222222;
--videobutton-icon-color:#009600;
--videobutton-hover-color:#aaffaa;
--videobutton-border-width:1px;

}

.videoContainer-small{
  width:400px;
  height: 225px; 
    
}

.videoContainer-large{
  width:640px;
  height: 360px; 
    
}

.videoContainer-medium{
  width:480px;
  height: 270px; 
    
}


.videoContainer{
  /*max-width:480px;
  max-height: 270px; */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border:0px solid blue;
  margin:0 auto;
}

.videoContainer .video-js {
  height: 100% !important;
  width: 100% !important;  
}

.videoContainer .video-js video{
  object-fit: cover;
}

/* Removes rounded corners from the main player container */
.video-js {
    border-radius: 0 !important;
    border:none !important;
    background-color: transparent !important;
}

/* Optional: Ensures the control bar also has square corners if it's styled separately */
.video-js .vjs-control-bar {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border:none !important;
}

.video-js:focus, 
.video-js *:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Change button size and background color */
.video-js .vjs-big-play-button {
  width: 1.5em;           /* Default is usually 3em */
  height: 1.5em;        /* Default is usually 1.5em */
  background-color: var(--videobutton-bg-color) !important; /* Red background */
  border-color: var(--videobutton-border-color) !important;      /* White border */
  border-width:var(--videobutton-border-width) !important;
  margin:0 auto;
}

/* Change the play icon color inside the button */
.video-js .vjs-big-play-button .vjs-icon-placeholder {
  color: var(--videobutton-icon-color) !important;
}

/* Optional: Change color on hover */
.video-js .vjs-big-play-button:hover {
  background-color: var(--videobutton-hover-color) !important;
}

.video-js .vjs-big-play-button {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.video-js .vjs-fullscreen-control {
    display: none !important;
}