.vjs-control-bar { /* Target the entire control bar */
  display: flex; /* Ensure it's using flexbox for layout */
}

.vjs-progress-control, .vjs-picture-in-picture-control, .vjs-fullscreen-control { /* Target everything EXCEPT play and volume */
  display: none !important; /* Hide them */
}

/* Optional: Style the remaining controls */
.vjs-play-control, .vjs-volume-control {
  /* Add your desired styles here, e.g., margin, padding, etc. */
  margin: 0 5px; /* Add some spacing between the buttons */
}

.vjs-volume-control {
  /* Style the volume slider specifically if needed */
}

/* Pre-play layout: only apply 16:9 to fluid players without explicit size */
.video-js.vjs-fluid:not([width]):not([height]) {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Always avoid white flash before poster/video */
.video-js { background-color: #000; }

/* Square players that flex to available width */
.video-js.vjs-square {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Make poster/video nicely fill the square */
.video-js .vjs-poster { background-size: cover; background-position: center; }
.video-js .vjs-tech { object-fit: cover; }