CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-10 17:38:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: Hide poster image when video ends and end screen is shown

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-30 10:14:31 +03:00
parent d5d1e2496f
commit 4e725d8659
1 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend-tools/video-js/src/components/overlays/EndScreenOverlay.css
View File

@ -6,7 +6,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: calc(100% - 46px); height: calc(100% - 46px);
background: rgba(0, 0, 0, 0.7); background: #000000;
display: none; display: none;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -16,6 +16,30 @@
z-index: 4; z-index: 4;
} }
/* Hide poster image when video ends and end screen is shown */
.video-js.vjs-ended .vjs-poster {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Make control bar and seekbar background black when video ends */
.video-js.vjs-ended .vjs-control-bar {
background: #000000 !important;
background-color: #000000 !important;
background-image: none !important;
}
.video-js.vjs-ended .vjs-progress-control {
background: #000000 !important;
background-color: #000000 !important;
}
/* Also ensure the gradient overlay is black when ended */
.video-js.vjs-ended::after {
background: linear-gradient(transparent, #000000) !important;
}
.vjs-related-videos-title { .vjs-related-videos-title {
color: white; color: white;
font-size: 24px; font-size: 24px;