mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-05 23:18:53 -05:00
2a12fec89e
Ensures the poster image remains visible during playback for audio files in embed players by updating both JavaScript logic and CSS. Also updates subtitle track handling to set the default track and adjusts Video.js player configuration for better control over native and emulated tracks.
96 lines
2.8 KiB
CSS
96 lines
2.8 KiB
CSS
/* ===== EMBED PLAYER STYLES ===== */
|
|
/* YouTube-style embed player with fullscreen poster */
|
|
|
|
/* Fullscreen poster image - fills entire iframe */
|
|
#page-embed .video-js-root-embed .video-js .vjs-poster {
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
object-fit: contain !important;
|
|
border-radius: 0 !important;
|
|
/* z-index: 1 !important; */
|
|
display: block !important;
|
|
background-size: contain !important;
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
background-color: #000 !important;
|
|
}
|
|
|
|
/* Keep poster visible even when playing for audio files */
|
|
#page-embed .video-js-root-embed .video-js.vjs-audio-type .vjs-poster,
|
|
#page-embed .video-js-root-embed .video-js.vjs-audio-poster-mode .vjs-poster,
|
|
#page-embed .video-js-root-embed .video-js.vjs-has-started.vjs-audio-type .vjs-poster,
|
|
#page-embed .video-js-root-embed .video-js.vjs-playing.vjs-audio-type .vjs-poster {
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
/* Fullscreen video element - maintain aspect ratio */
|
|
#page-embed .video-js-root-embed .video-js video {
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
object-fit: contain !important;
|
|
border-radius: 0 !important;
|
|
background-color: #000 !important;
|
|
}
|
|
|
|
/* Fullscreen video player container */
|
|
#page-embed .video-js-root-embed .video-js {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
position: relative !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Root embed container */
|
|
#page-embed .video-js-root-embed {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Page embed container */
|
|
#page-embed {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Big play button - only show when video hasn't started */
|
|
#page-embed .video-js-root-embed .video-js:not(.vjs-has-started) .vjs-big-play-button {
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
/* transform: translate(-50%, -50%) !important; */
|
|
z-index: 10 !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Hide big play button after video has started */
|
|
#page-embed .video-js-root-embed .video-js.vjs-has-started .vjs-big-play-button {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
/* ===== EMBED CONTROL BAR POSITIONING ===== */
|
|
/* Sticky controls for embed player - always at bottom of window */
|
|
/* #page-embed .video-js-root-embed .video-js .vjs-control-bar {
|
|
position: fixed !important;
|
|
bottom: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
*/
|