feat(home/hero): swap stag still for autoplaying morph video
Replace the static cosmic-stag.avif in the hero with an autoplaying, muted, looping <video> of the morph (webm), falling back to a still WebP frame inside the <video> for browsers that can't play any <source>. Standards-compliant fallback pattern; assets imported via Vite so they get content-hashed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
f560f819c3
commit
826052770f
3 changed files with 12 additions and 5 deletions
BIN
src/assets/cosmic-stag-morph-1024.webm
Normal file
BIN
src/assets/cosmic-stag-morph-1024.webm
Normal file
Binary file not shown.
BIN
src/assets/cosmic-stag-morph-fallback.webp
Normal file
BIN
src/assets/cosmic-stag-morph-fallback.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 778 KiB |
|
|
@ -3,7 +3,8 @@ import { useI18n } from 'vue-i18n'
|
|||
import { RouterLink } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
import cosmicStag from '@/assets/cosmic-stag.avif'
|
||||
import cosmicStagMorphWebm from '@/assets/cosmic-stag-morph-1024.webm'
|
||||
import cosmicStagMorphFallback from '@/assets/cosmic-stag-morph-fallback.webp'
|
||||
import heroLandscape from '@/assets/hero-landscape.webp'
|
||||
import sectionTile from '@/assets/section-tile.webp'
|
||||
|
||||
|
|
@ -74,11 +75,17 @@ const featuredEvents = [
|
|||
>
|
||||
Château du Faune
|
||||
</h1>
|
||||
<img
|
||||
:src="cosmicStag"
|
||||
alt=""
|
||||
<video
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
playsinline
|
||||
aria-hidden="true"
|
||||
class="mt-4 h-80 w-80 object-contain md:h-[28rem] md:w-[28rem] lg:h-[36rem] lg:w-[36rem] xl:h-[42rem] xl:w-[42rem]"
|
||||
/>
|
||||
>
|
||||
<source :src="cosmicStagMorphWebm" type="video/webm" />
|
||||
<img :src="cosmicStagMorphFallback" alt="" />
|
||||
</video>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue