mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-12 23:33:43 +08:00
kuekhaoyang
e2d7549a70
Remove the extra player shell, make the inline player full width on phones, align portrait web fullscreen to the top, and bump the app version to 4.8.2. Closes #154
49 lines
2.2 KiB
CSS
49 lines
2.2 KiB
CSS
/* Web Fullscreen (Window Fullscreen) Styles */
|
|
.kvideo-container.is-web-fullscreen {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: var(--kvideo-viewport-width, 100vw) !important;
|
|
height: var(--kvideo-viewport-height, 100vh) !important;
|
|
height: var(--kvideo-viewport-height, 100dvh) !important;
|
|
/* Fallback for browsers supporting dvh */
|
|
z-index: 2147483647 !important;
|
|
background: black !important;
|
|
border-radius: 0 !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
--kvideo-web-scale: 1;
|
|
}
|
|
|
|
.kvideo-container.is-web-fullscreen.top-align-stage {
|
|
align-items: flex-start !important;
|
|
padding-top: calc(env(safe-area-inset-top, 0px) + clamp(0px, 1.5vh, 16px)) !important;
|
|
}
|
|
|
|
.kvideo-container.is-web-fullscreen .kvideo-web-fullscreen-stage {
|
|
position: relative !important;
|
|
width: min(calc(var(--kvideo-stage-viewport-width, var(--kvideo-viewport-width, 100vw)) * var(--kvideo-web-scale)), calc(var(--kvideo-stage-viewport-height, var(--kvideo-viewport-height, 100vh)) * var(--kvideo-web-scale) * 16 / 9)) !important;
|
|
height: min(calc(var(--kvideo-stage-viewport-height, var(--kvideo-viewport-height, 100vh)) * var(--kvideo-web-scale)), calc(var(--kvideo-stage-viewport-width, var(--kvideo-viewport-width, 100vw)) * var(--kvideo-web-scale) * 9 / 16)) !important;
|
|
max-width: var(--kvideo-stage-viewport-width, var(--kvideo-viewport-width, 100vw)) !important;
|
|
max-height: var(--kvideo-stage-viewport-height, var(--kvideo-viewport-height, 100vh)) !important;
|
|
}
|
|
|
|
/* Ensure video takes up full space in web fullscreen */
|
|
.kvideo-container.is-web-fullscreen video {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Force Landscape Mode for Mobile (iOS mainly) */
|
|
.kvideo-container.is-web-fullscreen.force-landscape {
|
|
width: var(--kvideo-viewport-height, 100vh) !important;
|
|
width: var(--kvideo-viewport-height, 100dvh) !important;
|
|
height: var(--kvideo-viewport-width, 100vw) !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) rotate(90deg) !important;
|
|
border-radius: 0 !important;
|
|
}
|