.plyrwp-player-shell {
width: 100%;
max-width: var(--plyrwp-max-width, 100%);
margin: 0 auto;
line-height: normal;
--plyr-color-main: #23ade5;
--plyr-video-background: #000;
--plyr-menu-background: rgba(24, 24, 24, 0.98);
--plyr-menu-color: #fff;
--plyr-control-radius: 2px;
--plyr-video-controls-background: linear-gradient(transparent, rgba(0, 0, 0, 0.86));
}
.plyrwp-stage {
position: relative;
width: 100%;
aspect-ratio: var(--plyrwp-ratio, 16 / 9);
overflow: hidden;
background: #000;
}
.plyrwp-stage > video,
.plyrwp-stage > .plyr,
.plyrwp-stage .plyr__video-wrapper,
.plyrwp-stage .plyr__video-wrapper video {
width: 100%;
height: 100%;
}
.plyrwp-stage .plyr,
.plyrwp-stage .plyr__video-wrapper,
.plyrwp-stage video {
background: #000;
}
.plyrwp-stage .plyr__video-wrapper video {
object-fit: contain;
} .plyrwp-stage .plyr__controls {
align-items: center;
gap: 1px;
padding: 20px 10px 10px;
}
.plyrwp-stage .plyr__controls .plyr__control {
flex: 0 0 auto;
}
.plyrwp-stage .plyr__progress__container {
min-width: 48px;
flex: 1 1 auto;
}
.plyrwp-stage .plyr__time {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.plyrwp-stage .plyr__menu__container {
background: rgba(24, 24, 24, 0.98);
color: #fff;
border-radius: 4px;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
}
.plyrwp-stage .plyr__menu__container::after {
border-top-color: rgba(24, 24, 24, 0.98);
}
.plyrwp-stage .plyr__menu__container .plyr__control {
color: #fff;
}
.plyrwp-stage .plyr__control--overlaid {
border-radius: 50%;
}
.plyrwp-player-shell.plyrwp-mini {
position: fixed;
z-index: 999999;
right: 18px;
bottom: 18px;
width: min(420px, 42vw);
max-width: calc(100vw - 36px) !important;
margin: 0;
box-shadow: 0 14px 48px rgba(0, 0, 0, 0.35);
}
.plyrwp-mini-placeholder {
width: 100%;
height: 0;
}
.plyrwp-error {
padding: 12px 14px;
border-left: 4px solid #d63638;
background: #fff2f2;
color: #8a2424;
} .plyrwp-native-fallback .plyrwp-media {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 680px) {
.plyrwp-stage .plyr__controls {
gap: 0;
padding: 18px 6px 6px;
}
.plyrwp-stage .plyr__controls .plyr__control {
padding: 7px;
}
.plyrwp-stage .plyr__time {
font-size: 12px;
}
.plyrwp-stage .plyr__volume {
min-width: 0;
width: auto;
}
.plyrwp-player-shell.plyrwp-mini {
right: 10px;
bottom: 10px;
width: calc(100vw - 20px);
max-width: calc(100vw - 20px) !important;
}
}
@media (max-width: 480px) {
.plyrwp-stage .plyr__controls .plyr__control {
padding-left: 5px;
padding-right: 5px;
}
.plyrwp-stage .plyr__progress__container {
min-width: 24px;
}
.plyrwp-stage .plyr__time + .plyr__time {
margin-left: 2px;
}
}