matt/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use negative positioning to extend video into iOS safe areas
All checks were successful
build-website / build (push) Successful in 1m39s
Details

Browse Source 
- Change top from 0 to calc(-1 * env(safe-area-inset-top, 0px))
- Increase height to calc(100vh + env(safe-area-inset-top, 0px))
- Fix object-position to 'top center' to anchor video at top edge
- This pulls the video container UP into the safe area instead of starting at its boundary
This commit is contained in:
Matt
2025-09-25 16:46:49 +02:00
parent dc2b97e5e3
commit 73c195ab58
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/website/components/HeroSection.vue
View File

@@ -116,12 +116,12 @@ onMounted(() => {
const videoHTML = ` const videoHTML = `
<div id="ios-video-bg" style=" <div id="ios-video-bg" style="
position: fixed; position: fixed;
top: 0; top: calc(-1 * env(safe-area-inset-top, 0px));
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
height: 100vh; height: calc(100vh + env(safe-area-inset-top, 0px));
z-index: -1; z-index: -1;
background: #000; background: #000;
"> ">
@@ -135,7 +135,7 @@ onMounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: center top; object-position: top center;
"> ">
<source src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4" type="video/mp4"> <source src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4" type="video/mp4">
</video> </video>