:root { --jjp-primary-color: #18c936; }

.jjp-player-container {
  position: relative;
  max-width: 100%;
  background-color: #000;
}

.jjp-player-container video {
  width: 100%;
  height: auto;
  display: block;
}

/* Chrome/WebKit: colorea la línea de progreso */
.jjp-player-container video::-webkit-media-controls-timeline {
  color: var(--jjp-primary-color) !important;
}

/* Firefox: colorea el buffer de progreso */
.jjp-player-container video::-moz-progress-bar {
  background-color: var(--jjp-primary-color) !important;
}

/* Poster con play central coloreado */
.jjp-poster {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.jjp-poster-play::before {
  content: '\25BA'; /* ▶ */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: var(--jjp-primary-color);
  pointer-events: none;
}

/* Si deseas más personalización de controles nativos, podrías ocultarlos y crear controles personalizados */