Alain Afflelou Design System

Video 

<div x-data="videoAnimation( false )" class="plyr__video flex justify-center h-full ">
    <video x-ref="videoPlayer" playsinline>
        <source src="../../videos/magic.mp4" type="video/mp4" media="(min-width: 768px)">
        <source src="../../videos/magic2.mp4" type="video/mp4" media="(max-width: 767px)">
        <source src="../../videos/magic.mp4" type="video/mp4">

        Votre navigateur ne supporte pas la balise vidéo.
    </video>
</div>

<script>
    function videoAnimation(enableGsap = false) {
        return {
            enableGsap: enableGsap,
            plyr: null,
            init() {
                // Initialisation de Plyr
                this.plyr = new Plyr(this.$refs.videoPlayer, {
                    autoplay: false,
                    controls: ["play"]
                });
                if (this.enableGsap) {
                    this.initGsap();
                }
            },
            initGsap() {
                gsap.registerPlugin(ScrollTrigger);
                const video = this.$refs.videoPlayer;
                const container = document.querySelector('.container');
                if (video) {
                    const containerWidth = container.offsetWidth;
                    const trigger = gsap.fromTo(
                        this.plyr.elements.container, {
                            width: "100vw"
                        }, {
                            width: (containerWidth - 32),
                            marginLeft: "16px",
                            marginRight: "16px",
                            ease: "power1.out",
                            "border-radius": "8px",
                            scrollTrigger: {
                                trigger: video,
                                start: 'top-=450 top',
                                end: "top-=50 top",
                                scrub: true,
                                once: true,
                                // markers: true, // Pour debug, à retirer en production
                            }
                        }
                    );
                } else {
                    console.error("L'élément vidéo n'a pas été trouvé dans le DOM.");
                }
            }
        };
    }
</script>
 
{# components/video/video.twig #}

<div
        x-data="videoAnimation( {{ enableGsap ? 'true' : 'false' }} )"
        class="plyr__video flex justify-center h-full {{ videoClass }}"
>
    <video
            x-ref="videoPlayer"
            {{ autoplay ? 'autoplay' }}
            {{ loop ? 'loop' }}
            {{ muted ? 'muted' }}
			playsinline
    >
        <source src="{{ video_src_desktop | path }}" type="{{ video_type }}" media="(min-width: 768px)">
        <source src="{{ video_src_mobile | path }}" type="{{ video_type }}" media="(max-width: 767px)">
        <source src="{{ fallback_video_src | path }}" type="{{ video_type }}">

        Votre navigateur ne supporte pas la balise vidéo.
    </video>
</div>


<script>
	function videoAnimation(enableGsap = false) {
		return {
			enableGsap: enableGsap,
			plyr: null,
			init() {
				// Initialisation de Plyr
				this.plyr = new Plyr(this.$refs.videoPlayer, {
					autoplay: {{ autoplay ? "true" : "false" }},
					controls: {{ controls|json_encode() }}
				});

				if (this.enableGsap) {
					this.initGsap();
				}
			},

			initGsap() {
				gsap.registerPlugin(ScrollTrigger);

				const video = this.$refs.videoPlayer;
				const container = document.querySelector('.container');

				if (video) {
					const containerWidth = container.offsetWidth;
					const trigger = gsap.fromTo(
						this.plyr.elements.container,
						{width: "100vw"},
						{
							width: (containerWidth - 32),
							marginLeft: "16px",
							marginRight: "16px",
							ease: "power1.out",
							"border-radius": "8px",
							scrollTrigger: {
								trigger: video,
								start: 'top-=450 top',
								end: "top-=50 top",
								scrub: true,
								once: true,
								// markers: true, // Pour debug, à retirer en production
							}
						}
					);
				} else {
					console.error("L'élément vidéo n'a pas été trouvé dans le DOM.");
				}
			}
		};
	}
</script>
 
{
  "video_src_desktop": "/videos/magic.mp4",
  "video_src_mobile": "/videos/magic2.mp4",
  "fallback_video_src": "/videos/magic.mp4",
  "video_type": "video/mp4",
  "autoplay": false,
  "loop": false,
  "controls": [
    "play"
  ],
  "muted": false,
  "enableGsap": false
}

Guide Vidéo

How to use

Template name

video

Import

{% render "@video" with {...} %}

Exemples

{% render "@video" with {
    video_src_desktop: '/videos/desktop-video.mp4',
    video_src_mobile: '/videos/mobile-video.mp4',
    fallback_video_src: '/videos/fallback-video.mp4',
    video_type: 'video/mp4',
    autoplay: `true`,
    loop: `true`,
    muted: `true`,
    enableGsap: `true`,
    videoClass: 'custom-video-class',
    controls: ['play', 'pause']
} %}

Available props

  • video_src_desktop: string | URL of the video for desktop screens (min-width: 768px)
  • video_src_mobile: string | URL of the video for mobile screens (max-width: 767px)
  • fallback_video_src: string | URL of the fallback video if the other sources fail
  • video_type: string | MIME type of the video (e.g., video/mp4)
  • autoplay: true, false | default: false - Indicates whether the video should autoplay on load
  • loop: true, false | default: false - Indicates whether the video should loop at the end
  • muted: true, false | default: false - Indicates whether the video should be muted on load
  • enableGsap: true, false | default: false - Enables GSAP animations for the video if set to true
  • videoClass: string | Custom CSS classes for the video container
  • controls: array | List of controls to display for the video player (e.g., [‘play’, ‘pause’])