CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-07 16:08:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: Fullscreen video styles for embedded video player

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-09-19 12:44:17 +03:00
parent a74f51f9cd
commit 499d98a5b2
3 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend-tools/video-js/index-embed.html
View File

@ -8,7 +8,9 @@
</head>
<body>
<!-- <div id="video-js-root-main"></div> -->
<div id="page-embed">
<div id="video-js-root-embed" class="video-js-root-embed"></div>
</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

18
frontend-tools/video-js/src/VideoJS.css
View File

@ -23,13 +23,13 @@ html {
}
/* Fullscreen video styles for embedded video player */
.video-js-root-embed .video-js video {
#page-embed .video-js-root-embed .video-js video {
width: 100vw !important;
height: 100vh !important;
object-fit: cover !important;
border-radius: 0 !important;
}
.video-js-root-embed .video-js .vjs-poster {
#page-embed .video-js-root-embed .video-js .vjs-poster {
border-radius: 0 !important;
width: 100vw !important;
height: 100vh !important;
@ -57,7 +57,7 @@ html {
}
/* Fullscreen styles for embedded video player */
.video-js-root-embed .video-container {
#page-embed .video-js-root-embed .video-container {
width: 100vw;
height: 100vh;
max-width: none;
@ -75,7 +75,7 @@ html {
}
/* Fullscreen fluid styles for embedded video player */
.video-js-root-embed .video-js.vjs-fluid {
#page-embed .video-js-root-embed .video-js.vjs-fluid {
width: 100vw !important;
height: 100vh !important;
max-width: none !important;
@ -785,7 +785,7 @@ button {
}
/* Fullscreen video-js player styles for embedded video player */
.video-js-root-embed .video-js {
#page-embed .video-js-root-embed .video-js {
width: 100vw !important;
height: 100vh !important;
border-radius: 0;
@ -793,7 +793,7 @@ button {
}
/* Prevent page scrolling when embed is active */
.video-js-root-embed {
#page-embed .video-js-root-embed {
position: fixed;
top: 0;
left: 0;
@ -803,12 +803,6 @@ button {
background: #000;
}
html.video-js-root-embed-active,
body.video-js-root-embed-active {
margin: 0;
padding: 0;
overflow: hidden;
}
.video-chapter {
position: absolute;
top: auto;

3
frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
View File

@ -214,7 +214,8 @@ const VideoJSEmbed = ({
return (
<div className="video-js-wrapper" ref={containerRef}>
{inEmbed ? <div id="video-js-root-embed" className="video-js-root-embed" /> : <div id="video-js-root-main" className="video-js-root-main" />}
des an einai mesa sto modal i sto embed page prota
{/* {inEmbed ? <div id="video-js-root-embed" className="video-js-root-embed" /> : <div id="video-js-root-main" className="video-js-root-main" />} */}
</div>
);
};