.plyr {

  --plyr-color-main: #000; /* Accent color (e.g. progress bar, active icons) */
  --plyr-control-icon-color: #fff; /* Icon color */
  --plyr-control-hover-background: rgba(255, 255, 255, 0.2); /* Hover background on buttons */
  --plyr-range-fill-background: #000; /* Volume & progress bar fill */
  --plyr-video-control-color: white;
  --plyr-control-color: white;

}

    .plyr {
      position: relative;
    border: 2px solid #444;
    /*border-radius: 12px;*/
    overflow: hidden;
     box-sizing: border-box;
    }

    .plyr:hover {
    border-color: var(--link-hover);
    }

    /*
     * Hide the bottom control bar whenever the mouse
     * is outside the video frame.
     */
    .plyr.controls-hidden .plyr__controls {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /*
     * Show the controls when the mouse is inside the
     * video frame.
     */
    .plyr.controls-visible .plyr__controls {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    /* Smooth transition */
    .plyr .plyr__controls {
      transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
    }