Hero

<script>
    'use strict';

    function heroVideos() {
        return {
            players: {},
            currentlyPlaying: 'videoLeft',
            init() {
                const videos = [{
                    name: 'videoLeft',
                    ref: this.$refs.videoLeft
                }, {
                    name: 'videoRight',
                    ref: this.$refs.videoRight
                }];
                videos.forEach(video => {
                    this.players[video.name] = new Plyr(video.ref, {
                        loop: {
                            active: true
                        },
                        controls: []
                    });
                });
                this.players[this.currentlyPlaying].play();
            },
            switchPlay(name) {
                this.players[this.currentlyPlaying].pause();
                this.players[name].play();
                this.currentlyPlaying = name;
            },
            intersectSwitchPlay(name) {
                if (window.innerWidth < 768) {
                    this.switchPlay(name);
                }
            }
        }
    }
</script>

<div x-data="heroVideos" class="grid grid-cols-1 md:grid-cols-2 gap-4 md:h-[712px] md:max-h-screen-75 homepage-hero">
    <div class="relative h-[70vh] md:h-auto" @mouseenter="switchPlay('videoLeft')" x-intersect.full="intersectSwitchPlay('videoLeft')">
        <div class="relative z-10 mt-auto h-full flex md:items-start justify-end flex-col gap-4
        bg-gradient-to-tr to-60% from-dark-60 px-4 py-6 md:p-12 text-light-white">
            <h1 class="font-medium text-2xl md:text-5xl">Collection <br> Caractères Fil d’Or</h1>
            <div class="flex md:flex-col items-center md:items-start gap-4 md:gap-12 justify-between">
                <p class="text-sm md:text-base font-semibold">Lunettes de vue MAGIC + 2 clips inclus - 229€</p>
                <button type="button" class="shrink-0 max-md:btn-size-sm btn btn-light ">
                    Découvrir la collection

                </button>
            </div>
        </div>
        <div class="absolute top-0 left-0 right-0 bottom-0">
            <video class="h-full" x-ref="videoLeft" class="plyr" muted autoplay playsinline poster="../../img/hero/videoLeft.jpg">
                <source src="../../videos/hero/hero-afflelou.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="relative h-[70vh] md:h-auto" @mouseenter="switchPlay('videoRight')" x-intersect.full="intersectSwitchPlay('videoRight')">
        <div class="relative z-10 mt-auto h-full flex md:items-end justify-end flex-col gap-4
        bg-gradient-to-tl to-60% from-dark-60 px-4 py-6 md:p-12 text-light-white md:text-right">
            <h1 class="font-medium text-2xl md:text-4xl">N’arrêtez jamais <br> de bien entendre</h1>
            <div class="flex md:flex-col items-center md:items-end gap-4 md:gap-12 justify-between">
                <p class="text-sm md:text-base font-semibold">Votre deuxième paire d’aide <br> auditive pour 1€ de plus</p>
                <button type="button" class="shrink-0 max-md:btn-size-sm btn btn-audio ">
                    Profiter de l’offre

                </button>
            </div>
        </div>
        <div class="absolute top-0 left-0 right-0 bottom-0">
            <video class="h-full plyr" x-ref="videoRight" muted playsinline poster="../../img/hero/videoRight.jpg">
                <source src="../../videos/hero/hero-audio.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
</div>