Skip to content

Commit 8f5c405

Browse files
author
Dario Luna
committed
Fix overlay visibility and draggability in fullscreen mode
1 parent e7afe27 commit 8f5c405

File tree

1 file changed

+73
-18
lines changed

1 file changed

+73
-18
lines changed

‎index.html‎

Lines changed: 73 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,18 @@
2727
justify-content: center;
2828
}
2929

30-
video {
30+
.video-container {
31+
position: relative;
3132
width: 100vw;
3233
height: 100vh;
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
}
38+
39+
video {
40+
width: 100%;
41+
height: 100%;
3342
object-fit: contain;
3443
background: #000;
3544
}
@@ -52,6 +61,15 @@
5261
transition: box-shadow 0.3s ease;
5362
}
5463

64+
/* Ensure overlay is visible in fullscreen */
65+
.video-container:fullscreen .social-overlay,
66+
.video-container:-webkit-full-screen .social-overlay,
67+
.video-container:-moz-full-screen .social-overlay,
68+
.video-container:-ms-fullscreen .social-overlay {
69+
position: fixed;
70+
z-index: 2147483647;
71+
}
72+
5573
.social-overlay:hover {
5674
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
5775
}
@@ -177,11 +195,12 @@
177195
</style>
178196
</head>
179197
<body>
180-
<video id="mainVideo" controls playsinline preload="auto" loop>
181-
Your browser does not support HTML5 video.
182-
</video>
183-
184-
<div class="social-overlay" id="socialOverlay">
198+
<div class="video-container" id="videoContainer">
199+
<video id="mainVideo" controls playsinline preload="auto" loop>
200+
Your browser does not support HTML5 video.
201+
</video>
202+
203+
<div class="social-overlay" id="socialOverlay">
185204
<div class="social-links">
186205
<a href="https://www.facebook.com/groups/perujug" target="_blank" rel="noopener noreferrer" class="social-link facebook" title="Facebook">
187206
<div class="social-icon">
@@ -286,29 +305,52 @@
286305
}
287306
});
288307

289-
// Request fullscreen when video can play
308+
// Request fullscreen on container (so overlay is visible)
309+
const videoContainer = document.getElementById('videoContainer');
310+
290311
video.addEventListener('loadedmetadata', () => {
291312
console.log('Video metadata loaded, duration:', video.duration);
292313

293-
// Try to enter fullscreen
314+
// Try to enter fullscreen on container
294315
const requestFullscreen = () => {
295-
if (video.requestFullscreen) {
296-
video.requestFullscreen().catch(err => {
316+
const element = videoContainer;
317+
if (element.requestFullscreen) {
318+
element.requestFullscreen().catch(err => {
297319
console.log('Fullscreen request failed:', err);
298320
});
299-
} else if (video.webkitRequestFullscreen) {
300-
video.webkitRequestFullscreen();
301-
} else if (video.mozRequestFullScreen) {
302-
video.mozRequestFullScreen();
303-
} else if (video.msRequestFullscreen) {
304-
video.msRequestFullscreen();
321+
} else if (element.webkitRequestFullscreen) {
322+
element.webkitRequestFullscreen();
323+
} else if (element.mozRequestFullScreen) {
324+
element.mozRequestFullScreen();
325+
} else if (element.msRequestFullscreen) {
326+
element.msRequestFullscreen();
305327
}
306328
};
307329

308330
// Request fullscreen after a short delay
309331
setTimeout(requestFullscreen, 500);
310332
});
311333

334+
// Handle fullscreen change events
335+
document.addEventListener('fullscreenchange', updateOverlayPosition);
336+
document.addEventListener('webkitfullscreenchange', updateOverlayPosition);
337+
document.addEventListener('mozfullscreenchange', updateOverlayPosition);
338+
document.addEventListener('MSFullscreenChange', updateOverlayPosition);
339+
340+
function updateOverlayPosition() {
341+
// Ensure overlay is visible and positioned correctly in fullscreen
342+
const isFullscreen = document.fullscreenElement ||
343+
document.webkitFullscreenElement ||
344+
document.mozFullScreenElement ||
345+
document.msFullscreenElement;
346+
347+
if (isFullscreen) {
348+
// Overlay should remain visible and draggable
349+
socialOverlay.style.position = 'fixed';
350+
socialOverlay.style.zIndex = '2147483647';
351+
}
352+
}
353+
312354
// Ensure video plays
313355
video.addEventListener('canplay', () => {
314356
console.log('Video can play');
@@ -453,10 +495,23 @@
453495
currentX = clientX - initialX;
454496
currentY = clientY - initialY;
455497

498+
// Get viewport dimensions (works in both normal and fullscreen)
499+
const isFullscreen = document.fullscreenElement ||
500+
document.webkitFullscreenElement ||
501+
document.mozFullScreenElement ||
502+
document.msFullscreenElement;
503+
504+
const viewportWidth = isFullscreen ?
505+
(document.fullscreenElement?.clientWidth || window.innerWidth) :
506+
window.innerWidth;
507+
const viewportHeight = isFullscreen ?
508+
(document.fullscreenElement?.clientHeight || window.innerHeight) :
509+
window.innerHeight;
510+
456511
// Keep overlay within viewport bounds
457512
const rect = socialOverlay.getBoundingClientRect();
458-
const maxX = window.innerWidth - rect.width;
459-
const maxY = window.innerHeight - rect.height;
513+
const maxX = viewportWidth - rect.width;
514+
const maxY = viewportHeight - rect.height;
460515

461516
currentX = Math.max(0, Math.min(currentX, maxX));
462517
currentY = Math.max(0, Math.min(currentY, maxY));

0 commit comments

Comments
 (0)