mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-13 10:48:53 -05:00
d925bd0b5d
Updated VideoJSPlayer to initially hide the progress bar and only show it when the video starts playing or seeking. Also commented out fixed positioning for the control bar in embed.css, likely to adjust control bar behavior for embedded players.
86 lines
2.4 KiB
CSS
86 lines
2.4 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
*/
|