@viewlift/player-backup 2.0.96-smartTv-test22 → 2.0.97-backup

package/cjs/bundle.css

@@ -1,1561 +1,5 @@
 
 
-/*
- * Styles the icon size and line height for button icons in the SmartTV skin.
- *
- * Purpose:
- *   - Ensures button icons are large and legible for TV viewing distances.
- *   - Provides a consistent look for all control icons.
- *
- * Visual Design:
- *   - Sets a large font size (2.2em) and increased line height for icon clarity.
- *   - Applies to all .vjs-button > .vjs-icon-placeholder:before elements in the SmartTV skin.
- *
- * Accessibility:
- *   - Improves visibility for users with low vision or viewing from a distance.
- */
-.video-js.skin_smartTV .vjs-button > .vjs-icon-placeholder:before {
-  font-size: 2.2em;
-  line-height: 2.6;
-}
-
-/*
- * Styles the control bar with a gradient background, full height, and stacking order for SmartTV skin.
- *
- * Purpose:
- *   - Provides a visually distinct control bar that stands out over video content.
- *   - Ensures the control bar is always visible and accessible.
- *
- * Visual Design:
- *   - Uses a vertical gradient from transparent to black for modern look.
- *   - Sets full height and stacking order (z-index: 1) to overlay video.
- *   - Forces display to block for layout consistency.
- *
- * Accessibility:
- *   - High contrast background improves readability of controls.
- */
-.video-js.skin_smartTV .vjs-control-bar {
-  z-index: 1 !important;
-  height: 100% !important;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%) !important;
-  display: block !important;
-}
-
-/*
- * Styles the focus outline for buttons in spatial navigation mode.
- *
- * Purpose:
- *   - Provides a clear visual indicator when a button is focused using a remote or keyboard.
- *
- * Visual Design:
- *   - Adds a 3px solid outline in the current color.
- *
- * Accessibility:
- *   - Supports keyboard and remote navigation for users who cannot use a mouse.
- */
-.video-js.vjs-spatial-navigation-enabled .vjs-button:focus{
-  outline: 3px solid currentColor;
-}
-
-/*
- * Styles the focus outline for sliders in spatial navigation mode.
- *
- * Purpose:
- *   - Provides a clear visual indicator when a slider is focused using a remote or keyboard.
- *
- * Visual Design:
- *   - Adds a 2px solid outline in the current color.
- *
- * Accessibility:
- *   - Supports keyboard and remote navigation for users who cannot use a mouse.
- */
-.video-js.vjs-spatial-navigation-enabled .vjs-slider:focus{
-  outline: 2px solid currentColor;
-}
-
-/*
- * Styles the play progress bar in the control bar.
- *
- * Purpose:
- *   - Visually indicates the portion of the video that has been played.
- *
- * Visual Design:
- *   - Uses currentColor for the progress bar and rounded corners (4px radius).
- *
- * Accessibility:
- *   - High contrast and clear shape for easy tracking of playback progress.
- */
-.video-js.skin_smartTV .vjs-control-bar .vjs-play-progress{
-  background-color: currentColor;
-  border-radius: 4px;
-}
-
-/*
- * Styles the load progress bar in the control bar.
- *
- * Purpose:
- *   - Shows the buffered portion of the video.
- *
- * Visual Design:
- *   - Rounded corners (4px radius) and hidden overflow for a clean look.
- *
- * Accessibility:
- *   - Clear visual separation between loaded and played portions.
- */
-.video-js.skin_smartTV .vjs-control-bar .vjs-load-progress{
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-/*
- * Styles the volume level bar and hides it for SmartTV skin.
- *
- * Purpose:
- *   - Hides the default volume level bar to simplify the UI for TV users.
- *
- * Visual Design:
- *   - Uses currentColor for consistency, but display is set to none.
- *
- * Accessibility:
- *   - Reduces visual clutter for users who rely on remote navigation.
- */
-.video-js.skin_smartTV .vjs-control-bar .vjs-volume-level{
-  background-color: currentColor;
-  display: none !important;
-}
-
-/*
- * Fades out all child elements of elements with .vjs-fade in SmartTV skin.
- *
- * Purpose:
- *   - Smoothly hides UI elements when not needed.
- *
- * Visual Design:
- *   - Sets visibility to hidden and opacity to 0 with a 1s transition.
- *
- * Accessibility:
- *   - Prevents distraction by hiding inactive elements.
- */
-.video-js.skin_smartTV .vjs-fade > * {
-  visibility: hidden !important;
-  opacity: 0 !important;
-  transition: visibility 1s, opacity 1s !important;
-}
-
-/*
- * Styles the custom progress bar container in SmartTV skin.
- *
- * Purpose:
- *   - Provides a dedicated area for displaying video playback progress.
- *   - Ensures the progress bar is easily accessible and visible.
- *
- * Visual Design:
- *   - Positioned absolutely at the bottom of the video player.
- *   - Full width and fixed height (1.5em) for consistency.
- *   - Flexbox display for aligning child elements.
- *
- * Accessibility:
- *   - Sufficient height and width for easy interaction with remote or mouse.
- */
-.video-js.skin_smartTV .custom-smartTV-progress-bar {
-    position: absolute;
-    width: 100%;
-    display: flex;
-    height: 1.5em;
-    bottom: 4em;
-}
-
-/*
- * Styles the video title in SmartTV skin.
- *
- * Purpose:
- *   - Displays the title of the video being played.
- *   - Ensures the title is legible and well-positioned.
- *
- * Visual Design:
- *   - Large font size (24px) and bold weight for prominence.
- *   - Horizontal padding (67px) for spacing.
- *   - Relative positioning for alignment with other elements.
- *
- * Accessibility:
- *   - High contrast and large size for readability.
- */
-.video-js.skin_smartTV .video-title {
- flex: 1 1 auto;
- font-size: 24px;
-  font-weight: 700;
-  padding-left: 67px;
-  padding-right: 67px;
-  position: relative;
-}
-
-/*
- * Styles the progress control bar in SmartTV skin.
- *
- * Purpose:
- *   - Contains and controls the video playback progress.
- *   - Provides a clear and accessible way to seek within the video.
- *
- * Visual Design:
- *   - Padding removed for edge-to-edge display.
- *   - Relative positioning for stacking context.
- *   - Full width and fixed height (1.5em) for consistency.
- *   - Transition effects for height and position.
- *
- * Accessibility:
- *   - Sufficient height for easy interaction.
- *   - Clear visual feedback on focus and interaction.
- */
-.video-js.skin_smartTV .vjs-progress-control {
-  padding: 0px 0px;
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 1.5em;
-  top: -0.7em;
-  transition: height 0.1s, top 0.1s; 
-}
-
-/*
- * Displays the current time in SmartTV skin.
- *
- * Purpose:
- *   - Shows the user the current playback position in the video.
- *
- * Visual Design:
- *   - Block display to occupy full width.
- *
- * Accessibility:
- *   - Ensures the current time is always visible.
- */
-.video-js.skin_smartTV .vjs-current-time {
-  display: block;
-}
-
-/*
- * Hides the duration time in SmartTV skin.
- *
- * Purpose:
- *   - Omits the total duration display for a cleaner UI.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Reduces information overload for users.
- */
-.video-js.skin_smartTV .vjs-duration {
-   display: none
-}
-
-/*
- * Styles the remaining time display for non-live content in SmartTV skin.
- *
- * Purpose:
- *   - Shows the remaining time of the video for non-live content.
- *
- * Visual Design:
- *   - Block display with relative positioning.
- *   - Bottom-aligned with padding for spacing.
- *   - Fixed width (55px) and centered text.
- *   - Bold weight and increased size (14px) for visibility.
- *
- * Accessibility:
- *   - High contrast and clear positioning for easy reading.
- *   - Sufficient size for interaction with remote or mouse.
- */
-.video-js.skin_smartTV:not(.vjs-live) .vjs-remaining-time {
-  display: block !important;
-  position: relative;
-  right: 0em;
-  bottom: 1.65em;
-  font-size: 14px;
-  font-weight: 700;
-  padding-left: 0em;
-  width: 55px;
-  text-align: center;
-  padding-left: 0px;
-  padding-right: 0px;
-  opacity: 1 !important;
-}
-
-/*
- * Hides remaining time span with aria-hidden attribute in SmartTV skin.
- *
- * Purpose:
- *   - Omits the remaining time span from accessibility tree.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Prevents confusion by hiding non-essential elements.
- */
-.video-js.skin_smartTV .vjs-remaining-time span[aria-hidden] {
-  display: none; /* or visibility: hidden; or opacity: 0; */
-}
-
-/*
- * Styles the current time for live content in SmartTV skin.
- *
- * Purpose:
- *   - Indicates the current time position for live content.
- *
- * Visual Design:
- *   - Block display with full width.
- *   - Opacity set to 0 for initial hidden state.
- *
- * Accessibility:
- *   - Ensures current time is visible when needed.
- */
-.video-js.skin_smartTV.vjs-live .vjs-current-time {
-  display: block !important;
-  opacity: 0;
-}
-
-/*
- * Styles the current time display in SmartTV skin.
- *
- * Purpose:
- *   - Shows the current playback position in the video.
- *
- * Visual Design:
- *   - Block display with relative positioning.
- *   - Bottom-aligned with padding for spacing.
- *   - Fixed width (55px) and centered text.
- *   - Bold weight and increased size (14px) for visibility.
- *
- * Accessibility:
- *   - High contrast and clear positioning for easy reading.
- *   - Sufficient size for interaction with remote or mouse.
- */
-.video-js.skin_smartTV .vjs-current-time {
-  display: block;
-  position: relative;
-  right: 0em;
-  bottom: 1.65em;
-  font-size: 14px;
-  font-weight: 700;
-  width: 55px;
-  text-align: center;
-  padding-left: 0em;
-  padding-right: 0em;
-}
-
-/*
- * Styles the forward button in SmartTV skin.
- *
- * Purpose:
- *   - Provides a control for skipping forward in the video.
- *
- * Visual Design:
- *   - Fixed size (60px) and circular shape.
- *   - Centered icon with flexbox.
- *   - Semi-transparent background color.
- *
- * Accessibility:
- *   - Large clickable area for easy interaction.
- */
-.video-js.skin_smartTV .vjs-forward-button.vjs-control.vjs-button{
-  width: 60px;
-    height: 60px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    transform: translateX(100px);
-    background-color: rgba(43, 51, 63, 0.9);
-}
-
-/*
- * Styles the rewind button in SmartTV skin.
- *
- * Purpose:
- *   - Provides a control for skipping backward in the video.
- *
- * Visual Design:
- *   - Fixed size (60px) and circular shape.
- *   - Centered icon with flexbox.
- *   - Semi-transparent background color.
- *
- * Accessibility:
- *   - Large clickable area for easy interaction.
- */
-.video-js.skin_smartTV .vjs-rewind-button.vjs-control.vjs-button{
-  width: 60px;
-    height: 60px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    transform: translateX(-100px);
-    background-color: rgba(43, 51, 63, 0.9);
-}
-
-/*
- * Styles the custom control spacer in SmartTV skin.
- *
- * Purpose:
- *   - Provides flexible spacing between controls in the SmartTV skin.
- *
- * Visual Design:
- *   - Flexbox display for dynamic spacing.
- *   - Minimum height (50px) for consistent control size.
- *   - Absolute positioning for layout control.
- *
- * Accessibility:
- *   - Ensures controls are well-spaced and easy to interact with.
- */
-.video-js.skin_smartTV .vjs-custom-control-spacer {
-  display: flex;
-    min-height: 50px;
-    position: absolute;
-    bottom: 8em;
-    width: 100%;
-}
-
-/*
- * Styles the progress holder in the progress control bar in SmartTV skin.
- *
- * Purpose:
- *   - Displays the buffered and played portions of the video.
- *
- * Visual Design:
- *   - Margin and padding adjustments for alignment.
- *   - Rounded corners (4px radius) for a smooth appearance.
- *
- * Accessibility:
- *   - Clear visual distinction between buffered and unbuffered areas.
- */
-.video-js.skin_smartTV .vjs-progress-control .vjs-progress-holder {
-  margin: 0 0 0 0px;
-  border-radius: 4px;
-}
-
-/*
- * Styles the remaining time control for live content in SmartTV skin.
- *
- * Purpose:
- *   - Displays the remaining time for live content.
- *
- * Visual Design:
- *   - Block display with full width.
- *   - Opacity set to 0 for initial hidden state.
- *   - Fixed width (55px) for consistency.
- *
- * Accessibility:
- *   - Ensures remaining time is visible when needed.
- */
-.video-js.skin_smartTV.vjs-live .vjs-remaining-time.vjs-time-control.vjs-control {
-  display: block;
-  opacity: 0;
-  width: 55px;
-}
-
-/*
- * Styles the slow motion button in SmartTV skin.
- *
- * Purpose:
- *   - Provides a control for adjusting playback speed.
- *
- * Visual Design:
- *   - Font size (14px) and weight (500) for the button text.
- *   - Centered alignment and padding for a balanced look.
- *   - Border radius (8px) for a modern appearance.
- *
- * Accessibility:
- *   - Sufficient size and contrast for visibility.
- *   - Easily navigable with remote or keyboard.
- */
-.video-js.skin_smartTV button.vjs-control.vjs-button.vjs-slowmo-button {
-  font-size: 14px;
-  font-weight: 500;
-  align-self: center;
-  height: min-content;
-  padding: 5px 2px;
-  border-radius: 8px;
-}
-
-/*
- * Sets the height of the progress holder in SmartTV skin.
- *
- * Purpose:
- *   - Ensures the progress holder is tall enough for easy interaction.
- *
- * Visual Design:
- *   - Fixed height (10px) for consistency.
- *
- * Accessibility:
- *   - Large enough to be easily clickable or tappable.
- */
-.video-js.skin_smartTV .vjs-progress-control .vjs-progress-holder {
-  height: 10px !important;
-}
-
-/*
- * Adjusts the play progress bar's icon size and position in SmartTV skin.
- *
- * Purpose:
- *   - Ensures the play progress bar icon is properly sized and positioned.
- *
- * Visual Design:
- *   - Font size (1.8em) and top position (-0.21em) adjustments.
- *
- * Accessibility:
- *   - Clear and accessible icon size for interaction.
- */
-.video-js.skin_smartTV .vjs-play-progress:before {
-      font-size: 1.8em;
-    line-height: unset;
-    top: -0.21em;
-}
-
-/*
- * Hides the time tooltip in the play progress bar in SmartTV skin.
- *
- * Purpose:
- *   - Omits the time tooltip to reduce clutter.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Reduces distraction by hiding non-essential information.
- */
-.video-js.skin_smartTV .vjs-play-progress .vjs-time-tooltip {
-  display: none !important;
-}
-
-/*
- * Sets the font size for mouse display in SmartTV skin.
- *
- * Purpose:
- *   - Ensures the mouse display text is legible.
- *
- * Visual Design:
- *   - Sets a large font size (1.6666666667em).
- *
- * Accessibility:
- *   - Improves readability for users with low vision.
- */
-.video-js.skin_smartTV .vjs-mouse-display {
-  font-size: 1.6666666667em;
-}
-
-/*
- * Enlarges the progress holder's font size on hover in SmartTV skin.
- *
- * Purpose:
- *   - Increases the font size of the progress holder when hovered.
- *
- * Visual Design:
- *   - Font size set to 1em on hover.
- *
- * Accessibility:
- *   - Provides visual feedback on hover for interactive elements.
- */
-.video-js.skin_smartTV .vjs-progress-control:hover .vjs-progress-holder {
-  font-size: 1em !important;
-}
-
-/*
- * Styles the thumbnail images in SmartTV skin.
- *
- * Purpose:
- *   - Ensures thumbnail images are properly sized and rounded.
- *
- * Visual Design:
- *   - Fixed width (240px) and height (135px).
- *   - Rounded corners (4px radius).
- *
- * Accessibility:
- *   - Consistent and predictable thumbnail appearance.
- */
-.video-js.skin_smartTV .vjs-thumbnail{
-  width: 240px !important;
-  height: 135px !important;
-  border-radius: 4px !important;
-}
-
-/*
- * Styles the buttons in SmartTV skin.
- *
- * Purpose:
- *   - Ensures buttons are properly sized and aligned.
- *
- * Visual Design:
- *   - Fixed width (6em) and flexbox alignment.
- *
- * Accessibility:
- *   - Consistent button size for predictable interaction.
- */
-.video-js.skin_smartTV .vjs-button {
-  width: 6em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/*
- * Hides the fullscreen icons in SmartTV skin.
- *
- * Purpose:
- *   - Omits fullscreen icons to simplify the UI.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Reduces visual clutter for users.
- */
-.video-js.skin_smartTV .vjs-fullscreen .icon-minimize,
-.icon-maximize {
-  display: none;
-  height: 32px;
-}
-
-/*
- * Hides the fullscreen icons in SmartTV skin.
- *
- * Purpose:
- *   - Omits fullscreen icons to simplify the UI.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Reduces visual clutter for users.
- */
-.video-js.skin_smartTV .vjs-fullscreen .icon-maximize,
-.icon-minimize {
-  display: none;
-  height: 32px;
-}
-
-/*
- * Styles the play control button in SmartTV skin.
- *
- * Purpose:
- *   - Provides a large, accessible play button.
- *
- * Visual Design:
- *   - Fixed size (90px) and circular shape.
- *   - Centered icon with flexbox.
- *   - Large font size (4em) for the play icon.
- *   - Semi-transparent background color.
- *
- * Accessibility:
- *   - Large clickable area for easy interaction.
- */
-.video-js.skin_smartTV button.vjs-play-control.vjs-control.vjs-button {
-    width: 90px;
-    height: 90px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    font-size: 4em;
-    line-height: 1.3em;
-    background-color: rgba(43, 51, 63, 0.9);
-}
-
-/*
- * Styles the start from beginning button for non-live content in SmartTV skin.
- *
- * Purpose:
- *   - Provides a control to start the video from the beginning.
- *
- * Visual Design:
- *   - Minimum width (200px) and fixed height (45px).
- *   - Flexbox alignment for centering content.
- *   - Rounded corners (5px) for a modern look.
- *   - Semi-transparent background color.
- *
- * Accessibility:
- *   - Large enough for easy interaction with remote or mouse.
- */
-.video-js.skin_smartTV:not(.vjs-live) .vjs-startFromBeginning-button.vjs-control.vjs-button {
-    min-width: 200px;
-    height: 45px;
-    display: flex !important;
-    justify-content: center;
-    align-items: center;
-    border-radius: 5px;
-    position: absolute;
-    right: 175px;
-    bottom: 0;
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 1.3em;
-    background-color: rgba(43, 51, 63, 0.9);
-}
-
-/*
- * Styles the settings button in SmartTV skin.
- *
- * Purpose:
- *   - Provides a clear, accessible entry point for player settings on TV interfaces.
- *   - Ensures the button is visually prominent and easy to focus using a remote or keyboard.
- *
- * Visual Design:
- *   - Fixed width and height for consistent sizing across all resolutions.
- *   - Flexbox centering keeps the icon perfectly aligned both vertically and horizontally.
- *   - Rounded corners (border-radius) match the modern UI style and improve touch/remote usability.
- *   - Absolutely positioned at the bottom right of the control bar for predictable placement.
- *   - Large font size and bold weight make the icon/text stand out for accessibility.
- *   - Distinct semi-transparent background color ensures visibility over video content.
- *
- * Accessibility:
- *   - Sizing and contrast are chosen for visibility on large screens and from a distance.
- *   - Placement and size support easy navigation for users with limited dexterity.
- */
-.video-js.skin_smartTV .vjs-Settings-button.vjs-control.vjs-button {
-    width: 50px;
-    height: 45px;
-    display: flex !important;
-    justify-content: center;
-    align-items: center;
-    border-radius: 5px;
-    position: absolute;
-    right: 55px;
-    bottom: 0;
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 10px;
-    background-color: rgba(43, 51, 63, 0.9);
-}
-
-/*
- * Styles the closed caption button in SmartTV skin.
- *
- * Purpose:
- *   - Provides quick access to closed caption/subtitle options for accessibility.
- *   - Maintains visual and spatial consistency with the settings button for a unified control bar.
- *
- * Visual Design:
- *   - Same width, height, and flexbox centering as the settings button for a balanced look.
- *   - Positioned to the left of the settings button (right: 115px) for logical grouping.
- *   - Bold font and large size ensure the button is easy to see and select.
- *   - Rounded corners and matching background color visually group it with other controls.
- *
- * Accessibility:
- *   - Prominent placement and size make it easy to find for users needing captions.
- *   - Consistent styling helps users quickly identify interactive elements.
- *   - Designed for easy navigation with remotes or keyboard.
- */
-.video-js.skin_smartTV .vjs-ClosedCaption-button.vjs-control.vjs-button {
-    width: 50px;
-    height: 45px;
-    display: flex !important;
-    justify-content: center;
-    align-items: center;
-    border-radius: 5px;
-    position: absolute;
-    right: 115px;
-    bottom: 0;
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 10px;
-    background-color: rgba(43, 51, 63, 0.9);
-}
-
-/*
- * Clips the control text to fit the button in SmartTV skin.
- *
- * Purpose:
- *   - Ensures control text is properly clipped to fit within the button.
- *
- * Visual Design:
- *   - Inherits clipping and sizing from parent elements.
- *
- * Accessibility:
- *   - Prevents overflow of text outside the button area.
- */
-.video-js.skin_smartTV .vjs-startFromBeginning-button.vjs-control.vjs-button .vjs-control-text{
-   clip: inherit;
-   height: 100%;
-   width: 100%;
-   line-height: 45px;
-}
-
-/*
- * Styles the fullscreen control button in SmartTV skin.
- *
- * Purpose:
- *   - Provides a control for toggling fullscreen mode.
- *
- * Visual Design:
- *   - Flexbox centering for the icon.
- *   - Rotated 90 degrees for a distinctive look.
- *
- * Accessibility:
- *   - Easily identifiable and accessible control for fullscreen toggle.
- */
-.video-js.skin_smartTV button.vjs-fullscreen-control.vjs-control.vjs-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transform: rotate(90deg);
-}
-
-/*
- * Hides the icon placeholder for subs and caps button in SmartTV skin.
- *
- * Purpose:
- *   - Omits the icon placeholder for a cleaner look.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Reduces visual clutter.
- */
-.video-js.skin_smartTV.vjs-subs-caps-button .vjs-icon-placeholder:before {
-  display: none;
-}
-
-/*
- * Styles the volume panel and hides it in SmartTV skin.
- *
- * Purpose:
- *   - Hides the volume panel to simplify the UI for TV users.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Reduces visual clutter for users who rely on remote navigation.
- */
-.video-js.skin_smartTV .vjs-volume-panel .vjs-volume-control {
-  margin-left: -10px;
-  display: none !important;
-}
-
-/*
- * Changes cursor to pointer on hover for skip button in SmartTV skin.
- *
- * Purpose:
- *   - Indicates the skip button is interactive.
- *
- * Visual Design:
- *   - Cursor changes to pointer on hover.
- *
- * Accessibility:
- *   - Provides visual feedback for interactive elements.
- */
-.video-js.skin_smartTV .skipbtn:hover {
-  cursor: pointer;
-}
-
-/*
- * Changes cursor to pointer on hover for rewind button in SmartTV skin.
- *
- * Purpose:
- *   - Indicates the rewind button is interactive.
- *
- * Visual Design:
- *   - Cursor changes to pointer on hover.
- *
- * Accessibility:
- *   - Provides visual feedback for interactive elements.
- */
-.video-js.skin_smartTV .rewindbtn:hover {
-  cursor: pointer;
-}
-
-/*
- * Styles the live control button in SmartTV skin.
- *
- * Purpose:
- *   - Indicates live status and allows interaction for live content.
- *
- * Visual Design:
- *   - Positioned absolutely with right alignment.
- *   - No background color for a transparent look.
- *   - Bold font weight and size for visibility.
- *   - Fixed width (55px) and centered text.
- *
- * Accessibility:
- *   - Ensures live status is always visible.
- *   - Easy to interact with for seeking live content.
- */
-.video-js.skin_smartTV .vjs-live-control {
-    position: absolute !important;
-    right: 0em !important;
-    background-color: none;
-    bottom: 1.65em !important;
-    font-weight: 700 !important;
-    font-size: 16px !important;
-    width: 55px;
-    text-align: center;
-    display: block;
-}
-
-/*
- * Styles the title bar in SmartTV skin.
- *
- * Purpose:
- *   - Displays the title of the video and provides a consistent header area.
- *
- * Visual Design:
- *   - Transparent background to overlay on video.
- *   - Large font size (32px) for prominence.
- *   - Fixed height (45px) and padding for spacing.
- *   - Positioned at the bottom with 60% width.
- *
- * Accessibility:
- *   - High contrast and large size for readability.
- *   - Consistent placement for user familiarity.
- */
-.video-js.skin_smartTV .vjs-title-bar {
-    background: transparent !important;
-    font-size: 32px;
-    height: 45px;
-    transition: opacity 0.1s;
-    padding: 5px 1px 0px 51px;
-    position: relative;
-    bottom: 0;
-    width: 60%;
-    display: block !important;
-}
-
-/*
- * Styles the title bar's title in SmartTV skin.
- *
- * Purpose:
- *   - Displays the main title text in the title bar.
- *
- * Visual Design:
- *   - No margin and negative margin-bottom for tight spacing.
- *   - Overflow handling with ellipsis for long titles.
- *   - Multi-line support with line clamping.
- *
- * Accessibility:
- *   - Ensures title is always visible and properly clipped.
- */
-.video-js.skin_smartTV .vjs-title-bar .vjs-title-bar-title {
-    margin: 0;
-    margin-bottom:-6px !important;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-
-/*
- * Hides the title bar's description in SmartTV skin.
- *
- * Purpose:
- *   - Omits the description text to reduce clutter.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Reduces distraction by hiding non-essential information.
- */
-.video-js.skin_smartTV .vjs-title-bar .vjs-title-bar-description{
-  display: none !important;
-}
-
-/*
- * Styles the seek to live control in SmartTV skin.
- *
- * Purpose:
- *   - Provides a control to seek to the live point in the video.
- *
- * Visual Design:
- *   - Relative positioning for alignment.
- *   - Top offset (-0.5em) for visual alignment.
- *
- * Accessibility:
- *   - Ensures the control is always accessible.
- */
-.video-js.skin_smartTV .vjs-seek-to-live-control.vjs-control {
-  position: relative;
-  top: -0.5em;
-}
-
-/*
- * Hides the icon placeholder in seek to live control in SmartTV skin.
- *
- * Purpose:
- *   - Omits the icon placeholder for a cleaner look.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Reduces visual clutter.
- */
-.video-js.skin_smartTV .vjs-seek-to-live-control.vjs-control > span.vjs-icon-placeholder {
-  display: none;
-}
-
-/*
- * Hides the big play button in paused state for SmartTV skin.
- *
- * Purpose:
- *   - Omits the big play button when the video is paused.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Reduces distraction by hiding non-essential controls.
- */
-.video-js.skin_smartTV.vjs-paused .vjs-big-play-button {
-  display: none !important;
-}
-
-/*
- * Styles the seek to live control in SmartTV skin.
- *
- * Purpose:
- *   - Provides a control to seek to the live point in the video.
- *
- * Visual Design:
- *   - Minimum width (70px) and fixed height (45px).
- *   - Centered content with flexbox.
- *   - Rounded corners (5px) for a modern look.
- *   - Semi-transparent background color.
- *   - Top offset (5px) for visual alignment.
- *
- * Accessibility:
- *   - Large enough for easy interaction with remote or mouse.
- */
-.video-js.skin_smartTV .vjs-seek-to-live-control.vjs-control {
-    min-width: 70px;
-    height: 45px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 5px;
-    position: absolute;
-    right: 175px;
-    bottom: 0;
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 1.3em;
-    background-color: rgba(43, 51, 63, 0.9);
-    top: 5px;
-}
-
-/*
- * Adds a focus outline to seek to live control in SmartTV skin.
- *
- * Purpose:
- *   - Provides a clear visual indicator when the control is focused.
- *
- * Visual Design:
- *   - Adds a 3px solid outline in the current color.
- *
- * Accessibility:
- *   - Supports keyboard and remote navigation for users who cannot use a mouse.
- */
-.video-js.skin_smartTV .vjs-seek-to-live-control.vjs-control:focus {
-  outline: 3px solid currentColor;
-}
-
-/*
- * Styles the menu content in SmartTV skin.
- *
- * Purpose:
- *   - Styles the menu that appears in the SmartTV skin.
- *
- * Visual Design:
- *   - Positions the menu above the control bar.
- *   - Adjusts the right position for alignment.
- *
- * Accessibility:
- *   - Ensures the menu is accessible and does not overlap with controls.
- */
-.video-js.skin_smartTV .vjs-menu > ul.vjs-menu-content {
-  bottom: 3.5em !important;
-  right: -1em;
-}
-
-/*
- * Styles the Chromecast button icon in SmartTV skin.
- *
- * Purpose:
- *   - Ensures the Chromecast button icon is properly sized.
- *
- * Visual Design:
- *   - Fixed width (17px) and height (17px) for the icon.
- *
- * Accessibility:
- *   - Crisp and legible icon on all displays.
- */
-.video-js.skin_smartTV .vjs-chromecast-button .vjs-icon-placeholder {
-  width: 17px !important;
-  height: 17px !important;
-}
-
-/*
- * Hides the subs and caps button in SmartTV skin.
- *
- * Purpose:
- *   - Omits the subs and caps button to simplify the UI.
- *
- * Visual Design:
- *   - None (display: none).
- *
- * Accessibility:
- *   - Reduces visual clutter for users.
- */
-.video-js.skin_smartTV .vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button {
-  display: none;
-}
-
-/*
- * Styles the subs and caps button in SmartTV skin.
- *
- * Purpose:
- *   - Ensures the subs and caps button is properly sized.
- *
- * Visual Design:
- *   - Fixed height and width for consistency.
- *
- * Accessibility:
- *   - Easily navigable with remotes or keyboard.
- */
-.video-js.skin_smartTV button.vjs-subs-caps-button.vjs-menu-button.vjs-menu-button-popup.vjs-button {
-  height: min-content;
-  width: min-content;
-}
-
-/*
- * Styles the vertical volume panel in SmartTV skin.
- *
- * Purpose:
- *   - Provides a vertical layout for the volume control, suitable for TV remotes and large screens.
- *   - Ensures the volume panel is wide enough for easy interaction, especially with remote navigation.
- *
- * Visual Design:
- *   - Sets a fixed width (6em) for consistent sizing and touch/remote usability.
- *   - Integrates with the overall control bar design for a seamless look.
- *
- * Accessibility:
- *   - Wide enough for easy focus and selection using a remote or keyboard.
- *   - Supports users with limited dexterity by increasing the interactive area.
- */
-.video-js.skin_smartTV .vjs-volume-panel.vjs-volume-panel-vertical {
-  width: 6em;
-}
-
-/*
- * Adjusts the content position in SmartTV skin.
- *
- * Purpose:
- *   - Fine-tunes the position of overlay content (such as menus or widgets) to avoid overlapping with controls.
- *   - Ensures content is visually aligned and does not obscure important UI elements.
- *
- * Visual Design:
- *   - Uses !important to override default positioning and guarantee placement.
- *   - Moves content slightly up and to the left for optimal visibility on TV screens.
- *
- * Accessibility:
- *   - Prevents overlay content from covering navigation or playback controls, supporting a better user experience.
- */
-.video-js.skin_smartTV .content {
-  bottom: 3.4rem !important;
-  right: -4rem !important;
-}
-
-/*
- * Styles the setting icon in SmartTV skin.
- *
- * Purpose:
- *   - Ensures the settings icon (SVG) is clearly visible and appropriately sized for TV interfaces.
- *   - Maintains visual consistency with other icons and controls.
- *
- * Visual Design:
- *   - Sets a fixed height (18px) for the SVG icon, overriding any inherited styles.
- *   - Keeps the icon crisp and legible on high-resolution displays.
- *
- * Accessibility:
- *   - Sufficient size for visibility from a distance and for users with low vision.
- */
-.setting-icon > svg {
-  height: 18px !important;
-}
-
-/*
- * Styles the output overlay in SmartTV skin.
- *
- * Purpose:
- *   - Provides a transparent overlay for displaying output or feedback without blocking user interaction.
- *   - Used for visual effects, loading indicators, or non-interactive overlays.
- *
- * Visual Design:
- *   - Absolutely positioned to cover the entire player area.
- *   - Full width and height ensure complete coverage.
- *   - z-index: 0 keeps the overlay behind interactive controls.
- *   - pointer-events: none allows clicks and navigation to pass through.
- *   - No border for a clean, unobtrusive appearance.
- *
- * Accessibility:
- *   - Overlay does not interfere with keyboard or remote navigation.
- *   - Ensures that feedback or effects are visible but never block controls or content.
- */
-.output-overlay {
-  position: absolute;
-  bottom: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 0;
-  border: 0;
-  pointer-events: none;
-}
-
-/*
- * Styles the iframe to take full width and height in SmartTV skin.
- *
- * Purpose:
- *   - Ensures iframes used in the player take up the full available space.
- *
- * Visual Design:
- *   - Sets width and height to 100% for full coverage.
- *
- * Accessibility:
- *   - Guarantees that iframes do not interfere with player controls or content.
- */
-iframe {
-  width: 100%;
-  height: 100%;
-}
-
-/*
- * Responsive styles for SmartTV skin on small screens.
- *
- * Purpose:
- *   - Adjusts the layout and element sizes for better usability on smaller screens.
- *
- * Visual Design:
- *   - Hides the provider image and adjusts icon sizes.
- *   - Modifies button sizes and positions for smaller displays.
- *   - Changes the layout of the seek to live control and live control.
- *   - Hides unnecessary buttons like slowmo and rewind.
- *   - Adjusts the title bar and progress control for smaller widths.
- *
- * Accessibility:
- *   - Ensures all controls are still accessible and usable on smaller screens.
- *   - Maintains a good user experience across different device sizes.
- */
-@media (max-width: 600px) {
-  .tvProviderImage {
-    display: none;
-  }
-  .video-js.skin_smartTV .vjs-fullscreen .icon-minimize,
-  .icon-maximize {
-    height: 30px !important;
-  }
-  .video-js.skin_smartTV .vjs-fullscreen .icon-maximize,
-  .icon-minimize {
-    height: 30px !important;
-  }
-  .video-js.skin_smartTV button.vjs-fullscreen-control.vjs-control.vjs-button > span.vjs-icon-placeholder::before {
-    height: min-content;
-  }
-  .video-js.skin_smartTV .vjs-seek-to-live-control.vjs-control {
-    position: relative !important;
-    right: 0em !important;
-    bottom: 0 !important;
-  }
-  .video-js.skin_smartTV .vjs-live-control {
-    right: -1em !important;
-    position: relative !important;
-    bottom: 0 !important;
-    font-size: 12px !important;
-  }
-  .video-js.skin_smartTV button.vjs-slowmo-button {
-    display: none;
-  }
-  .video-js.skin_smartTV button.vjs-rewind-button {
-    display: none;
-  }
-  .video-js.skin_smartTV button.vjs-rewind-button > svg {
-    height: 20px;
-  }
-  .video-js.skin_smartTV .vjs-button {
-    width: 4.8em;
-  }
-  .video-js.skin_smartTV .widget-selection {
-    display: none;
-  }
-  .video-js.skin_smartTV .container {
-    display: none !important;
-  }
-  .video-js.skin_smartTV .vjs-control-bar {
-    height: 4em !important;
-  }
-  .video-js.skin_smartTV .vjs-button > .vjs-icon-placeholder:before {
-    font-size: 2.5em;
-    line-height: 1.5;
-  }
-  .video-js.skin_smartTV .vjs-play-progress:before {
-    font-size: 1.2em;
-    position: absolute;
-    right: -0.5em;
-    z-index: 1;
-  }
-  .video-js.skin_smartTV button.vjs-skip-button > svg {
-    height: 20px;
-  }
-  .video-js.skin_smartTV button.vjs-big-play-button {
-    width: 50px !important;
-    height: 50px !important;
-    font-size: 2.1rem !important;
-  }
-  .video-js.skin_smartTV .vjs-seek-to-live-control.vjs-control > span.vjs-icon-placeholder {
-    display: block;
-  }
-  .stream-selector-icon > svg {
-    width: 24px;
-    height: 24px;
-  }
-  .video-js.skin_smartTV.vjs-live .vjs-progress-control .vjs-progress-holder {
-    margin: 0 12px 0 21px;
-  }
-  .video-js.skin_smartTV .vjs-seek-to-live-text {
-    font-size: 12px;
-  }
-  .video-js.skin_smartTV .vjs-progress-control .vjs-progress-holder {
-    margin: 0 5px 0 5px;
-  }
-}
-
-/*
- * Styles the big play button in paused state for SmartTV skin.
- *
- * Purpose:
- *   - Provides a large, accessible play button when the video is paused.
- *
- * Visual Design:
- *   - Fixed size (90px) and circular shape.
- *   - Centered icon with flexbox.
- *   - Large font size (6em) for the play icon.
- *
- * Accessibility:
- *   - Large clickable area for easy interaction.
- */
-.video-js.skin_smartTV.vjs-paused .vjs-big-play-button {
-  width: 90px;
-  height: 90px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  font-size: 6em;
-  line-height: 1.3em;
-}
-
-/*
- * Shows the volume control on hover and active states in SmartTV skin.
- *
- * Purpose:
- *   - Displays the volume control when the user hovers or the panel is active.
- *
- * Visual Design:
- *   - Flexbox display for centering content.
- *   - Transition effects for smooth appearance.
- *
- * Accessibility:
- *   - Ensures volume control is accessible when needed.
- */
-.video-js.skin_smartTV .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:hover .vjs-volume-control.vjs-control.vjs-volume-horizontal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  transition: width 0.1s;
-}
-
-.video-js.skin_smartTV .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal:active .vjs-volume-control.vjs-control.vjs-volume-horizontal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  transition: width 0.1s;
-}
-
-/*
- * Styles the player setting options in SmartTV skin.
- *
- * Purpose:
- *   - Styles the individual setting options in the SmartTV skin.
- *
- * Visual Design:
- *   - Flexbox display for alignment.
- *   - Width (95%) and height (50px) for consistency.
- *   - Background color and text color for visibility.
- *   - Padding and margin for spacing.
- *   - Border radius (2px) and box shadow for a modern look.
- *
- * Accessibility:
- *   - High contrast and clear sizing for visibility.
- *   - Easily selectable with remote or keyboard.
- */
-.video-js.skin_smartTV .default-option-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 95%;
-  height: 50px;
-  background: rgba(0, 0, 0, 0.6);
-  color: currentColor;
-  padding: 5px 10px;
-  font-weight: 700;
-  font-size: 18px;
-  border-radius: 2px;
-  box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
-  margin: 15px 0px;
-  text-transform: capitalize;
-  cursor: pointer;
-}
-
-.video-js.skin_smartTV .default-option-wrapper span {
-  height: 40px;
-}
-
-.video-js.skin_smartTV .default-option-wrapper span > img{
-  height: 100%;
-}
-
-
-/*
- * Styles the default sidebar in SmartTV skin.
- *
- * Purpose:
- *   - Provides a sidebar for additional options or information in the SmartTV skin.
- *
- * Visual Design:
- *   - Absolutely positioned to the right of the video player.
- *   - Fixed width (400px) and full height.
- *   - Background color and padding for separation.
- *   - Overflow set to scroll for content management.
- *
- * Accessibility:
- *   - Ensures the sidebar is always accessible and does not overlap with important controls.
- */
-.video-js.skin_smartTV .default-sidebar {
-  position: absolute;
-  top: 0;
-  color: currentColor;
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(43, 51, 63, 0.9);
-  height: 100%;
-  min-height: 720px;
-  width: 400px;
-  padding: 20px 25px 0 25px;
-  right: 0px;
-  z-index: 30;
-  overflow: scroll;
-  /* right: -450px; */
-}
-
-/*
- * Adds a focus outline to focused elements in SmartTV skin.
- *
- * Purpose:
- *   - Provides a clear visual indicator when an element is focused.
- *
- * Visual Design:
- *   - Adds a 2px solid outline in the current color.
- *
- * Accessibility:
- *   - Supports keyboard and remote navigation for users who cannot use a mouse.
- */
-.video-js.skin_smartTV .focused{
-    outline: 2px solid currentColor;
-}
-
-/*
- * Hides player controls in SmartTV skin.
- *
- * Purpose:
- *   - Omits player controls to reduce clutter.
- *
- * Visual Design:
- *   - None (visibility: hidden; opacity: 0).
- *
- * Accessibility:
- *   - Prevents accidental interaction with hidden controls.
- */
-.video-js.skin_smartTV .hidePlayerControls {
-  visibility: hidden !important;
-  opacity: 0 !important;
-}
-
-/*
- * Styles the settings heading in SmartTV skin.
- *
- * Purpose:
- *   - Provides a heading for the settings section in the SmartTV skin.
- *
- * Visual Design:
- *   - Large font size (38px) and bold weight for prominence.
- *   - Top and bottom padding for spacing.
- *
- * Accessibility:
- *   - High contrast and large size for readability.
- */
-.video-js.skin_smartTV .settingsHeading {
-    font-size: 38px;
-    font-weight: 700;
-    padding-top: 30px;
-    padding-bottom: 20px;
-}
-
-.video-js.skin_smartTV .hide-default-controls {
-  display: none !important;
-}
-@media (max-width: 600px) {
-  .video-js.skin_smartTV button.vjs-big-play-button {
-    width: 50px !important;
-    height: 50px !important;
-    font-size: 2.1rem !important;
-  }
-
-}
-
-.video-js.skin_smartTV .vjs-big-play-button .vjs-icon-placeholder:before,
-.vjs-button>.vjs-icon-placeholder:before {
-    position: relative !important;
-}
-.video-js.skin_smartTV .vjs-big-play-button .vjs-icon-placeholder:before{
-    display: flex;
-    left: 0px;
-    top: -1px;
-}
 
 
 
@@ -1570,22 +14,6 @@ iframe {
     height: 100%;
 }
 
-.video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value{
-    line-height: 2.5;
-}
-
-.video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button > svg{
-    height: 19px;
-    width: 19px;
-    cursor: pointer;
-}
-
-.video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button > svg{
-    height: 19px;
-    width: 19px;
-    cursor: pointer;
-}
-
 .video-js.skin_vlone .vjs-play-progress:before {
     display: none !important;
 }
@@ -1717,25 +145,10 @@ iframe {
     width: 50px !important;
     height: 50px !important;
     font-size: 2.1rem !important;
-    }
-
-.video-js.skin_vlone .vjs-playback-rate .vjs-playback-rate-value {
-    display: none;
-}
-
-.video-js.skin_vlone button.vjs-control.vjs-button.vjs-rewind-button>svg {
-    display: none;
-}
-
-.video-js.skin_vlone button.vjs-control.vjs-button.vjs-skip-button>svg {
-    display: none;
-}
-}
+  }
+  }
   
 
-
-
-
 /* CSS for videojs-dvr-seekbar */
 
 .video-js.vjs-dvr-seekbar {
@@ -1910,9 +323,6 @@ iframe {
 
 
 
-
-
-
 .video-js .multicamera-parent.default{
     height: 345px;
     position: absolute;
@@ -1992,6 +402,9 @@ iframe {
 }
 
 
+
+
+
 /* nextep */
 .next-ep-preview{
     position: absolute;
@@ -2067,38 +480,6 @@ iframe {
         margin-left: 8px;
     }
 }
-/* a wrapper element that tracks the mouse vertically */
-.vjs-thumbnail-holder {
-  position: absolute;
-  left: -1000px;
-}
-
-/* the thumbnail image itself */
-.vjs-thumbnail {
-  position: absolute;
-  left: 0;
-  bottom: 1.3em;
-  opacity: 0;
-  transition: opacity .2s ease;
-  -webkit-transition: opacity .2s ease;
-  -moz-transition: opacity .2s ease;
-  -mz-transition: opacity .2s ease;
-}
-
-/* fade in the thumbnail when hovering over the progress bar */
-/* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
-.vjs-progress-control:hover .vjs-thumbnail,
-.vjs-progress-control.fake-active .vjs-thumbnail,
-.vjs-progress-control:active .vjs-thumbnail {
-  opacity: 1;
-}
-
-/* ... but hide the thumbnail when hovering directly over it */
-.vjs-progress-control:hover .vjs-thumbnail:hover,
-.vjs-progress-control:active .vjs-thumbnail:active {
-  opacity: 0;
-}
-
 .video-js.vjs-quality-menu {
     display: block;
 }
@@ -2169,6 +550,38 @@ iframe {
     -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
     animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite;
 }
+/* a wrapper element that tracks the mouse vertically */
+.vjs-thumbnail-holder {
+  position: absolute;
+  left: -1000px;
+}
+
+/* the thumbnail image itself */
+.vjs-thumbnail {
+  position: absolute;
+  left: 0;
+  bottom: 1.3em;
+  opacity: 0;
+  transition: opacity .2s ease;
+  -webkit-transition: opacity .2s ease;
+  -moz-transition: opacity .2s ease;
+  -mz-transition: opacity .2s ease;
+}
+
+/* fade in the thumbnail when hovering over the progress bar */
+/* .fake-active is needed for Android only. It's removed on touchend/touchecancel */
+.vjs-progress-control:hover .vjs-thumbnail,
+.vjs-progress-control.fake-active .vjs-thumbnail,
+.vjs-progress-control:active .vjs-thumbnail {
+  opacity: 1;
+}
+
+/* ... but hide the thumbnail when hovering directly over it */
+.vjs-progress-control:hover .vjs-thumbnail:hover,
+.vjs-progress-control:active .vjs-thumbnail:active {
+  opacity: 0;
+}
+
 .vjs-poster {
   display: inline-block;
   vertical-align: middle;