mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-11 09:58:53 -05:00
e65954f391
Simplifies and updates embed player CSS for YouTube-style fullscreen poster and video display, moving legacy styles to embed_OLD.css. Refines overlay visibility logic in EmbedInfoOverlay for more accurate YouTube-like behavior, and ensures embed styles are imported in VideoJSPlayer. Updates HTML to enforce full-viewport sizing and overflow handling for embedded player.
76 lines
2.1 KiB
CSS
76 lines
2.1 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;
|
|
}
|