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

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

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

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

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

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

@ -214,7 +214,8 @@ const VideoJSEmbed = ({
return ( return (
<div className="video-js-wrapper" ref={containerRef}> <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> </div>
); );
}; };