mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-11 01:48:53 -05:00
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;
|
|
}
|
|
*/
|