Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Force video playback and adjust overlay transparency for better visibility

Browse Source
This commit is contained in:
Johan Samudio
2026-03-09 16:38:08 -05:00
parent 2dc8208b60
commit 10230177c9
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/views/LandingView.vue
View File

@ -16,8 +16,8 @@
<!-- Minimalist Hero --> <!-- Minimalist Hero -->
<header class="hero-minimal"> <header class="hero-minimal">
<video autoplay muted loop playsinline class="hero-video"> <video autoplay muted loop playsinline class="hero-video" ref="videoRef">
<source src="/videopromo.mp4" type="video/mp4"> <source src="/videopromo.mp4?v=3" type="video/mp4">
</video> </video>
<div class="hero-overlay"></div> <div class="hero-overlay"></div>
@ -114,6 +114,7 @@ import { useI18n } from 'vue-i18n'
const router = useRouter() const router = useRouter()
const { t } = useI18n() const { t } = useI18n()
const scrolled = ref(false) const scrolled = ref(false)
const videoRef = ref<HTMLVideoElement | null>(null)
const handleScroll = () => { const handleScroll = () => {
scrolled.value = window.scrollY > 50 scrolled.value = window.scrollY > 50
@ -122,6 +123,11 @@ const handleScroll = () => {
onMounted(() => { onMounted(() => {
window.addEventListener('scroll', handleScroll) window.addEventListener('scroll', handleScroll)
// Force play video just in case
if (videoRef.value) {
videoRef.value.play().catch(e => console.warn("Video autoplay failed:", e))
}
// PWA Detection // PWA Detection
const isStandalone = window.matchMedia('(display-mode: standalone)').matches || (window.navigator as any).standalone === true; const isStandalone = window.matchMedia('(display-mode: standalone)').matches || (window.navigator as any).standalone === true;
if (isStandalone) { if (isStandalone) {
@ -258,7 +264,7 @@ const scrollToInstall = () => {
.hero-overlay { .hero-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
z-index: -1; z-index: -1;
} }