{"id":2295,"date":"2026-05-18T17:53:31","date_gmt":"2026-05-18T17:53:31","guid":{"rendered":"https:\/\/\u00e9milienplisson.fr\/?page_id=2295"},"modified":"2026-06-03T18:03:03","modified_gmt":"2026-06-03T18:03:03","slug":"teasers-2","status":"publish","type":"page","link":"https:\/\/\u00e9milienplisson.fr\/?page_id=2295","title":{"rendered":"TEASERS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2295\" class=\"elementor elementor-2295\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3dde1ce e-con-full e-flex e-con e-parent\" data-id=\"3dde1ce\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee0a4ee elementor-widget elementor-widget-shortcode\" data-id=\"ee0a4ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"video-grid\">            <div class=\"video-card js-project-card\" data-full-video=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/05\/TEASER-TS-FESTIVAL-.mp4\">\n                <div class=\"video-player-container\">\n                                    <\/div>\n                <div class=\"video-content\">\n                    <h2>TS FESTIVAL<\/h2>\n                <\/div>\n            <\/div>\n                        <div class=\"video-card js-project-card\" data-full-video=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/05\/TEASER-SYNDROME-Cie-Eponyme.mp4\">\n                <div class=\"video-player-container\">\n                                            <video class=\"js-video\" loop muted playsinline preload=\"none\">\n                            <source src=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/06\/TEASER-SYNDROME-Cie-Eponyme-3MB.mp4\" type=\"video\/mp4\">\n                        <\/video>\n                                    <\/div>\n                <div class=\"video-content\">\n                    <h2>SYNDROME<\/h2>\n                <\/div>\n            <\/div>\n                        <div class=\"video-card js-project-card\" data-full-video=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/05\/TEASER-Taxi-Moira.mp4\">\n                <div class=\"video-player-container\">\n                                            <video class=\"js-video\" loop muted playsinline preload=\"none\">\n                            <source src=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/06\/TEASER-Taxi-Moira_alauneeee.mp4\" type=\"video\/mp4\">\n                        <\/video>\n                                    <\/div>\n                <div class=\"video-content\">\n                    <h2>TAXI MOYRA<\/h2>\n                <\/div>\n            <\/div>\n                        <div class=\"video-card js-project-card\" data-full-video=\"https:\/\/\u00e9milienplisson.fr\/wp-content\/uploads\/2026\/05\/teaser-tombe.dans-les-bois.mp4\">\n                <div class=\"video-player-container\">\n                                    <\/div>\n                <div class=\"video-content\">\n                    <h2>TOMB\u00c9<\/h2>\n                <\/div>\n            <\/div>\n            <\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54ae611 elementor-widget elementor-widget-html\" data-id=\"54ae611\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.video-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)) !important; gap: 15px !important; padding: 20px 0 !important; }\n.video-card { position: relative !important; background: #000000 !important; border-radius: 0px !important; overflow: hidden !important; border: none !important; cursor: pointer !important; }\n.video-player-container { width: 100% !important; aspect-ratio: 16 \/ 9 !important; background: #000000 !important; overflow: hidden !important; }\n\n\/* LE FAMEUX ZOOM POUR CACHER LES BANDES NOIRES ! (Ajuste 1.35 si besoin) *\/\n.video-player-container video { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.35) !important; }\n\n.video-content { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; box-sizing: border-box !important; padding: 25px !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%) !important; opacity: 0 !important; transform: translateY(10px) !important; transition: opacity 0.3s ease, transform 0.3s ease !important; pointer-events: none !important; z-index: 10 !important; }\n.video-card:hover .video-content { opacity: 1 !important; transform: translateY(0) !important; }\n.video-content h2 { color: #ffffff !important; font-family: sans-serif !important; font-size: 1.4rem !important; font-weight: 400 !important; margin: 0 !important; letter-spacing: 0.5px !important; }\n\n\/* LIGHTBOX *\/\n.custom-lightbox { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: #000000 !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0; pointer-events: none; transition: opacity 0.4s ease !important; }\n.custom-lightbox.is-active { opacity: 1 !important; pointer-events: auto !important; }\n.lightbox-content { width: 100% !important; height: 100% !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; }\n.lightbox-content video { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; aspect-ratio: 16 \/ 9 !important; }\n.lightbox-content video::-webkit-media-controls { display:none !important; }\n.lightbox-content video::-moz-media-controls { display:none !important; }\n.lightbox-close { position: absolute !important; top: 30px !important; left: 30px !important; color: #ffffff !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 1px !important; font-family: sans-serif !important; cursor: pointer !important; z-index: 20 !important; opacity: 0.7; transition: opacity 0.2s !important; }\n.lightbox-close:hover { opacity: 1 !important; }\n\n\/* PLAYER CONTROLS *\/\n.custom-player-controls { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 60px !important; background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0)) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; padding: 0 30px !important; z-index: 20 !important; }\n.timeline-container { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 4px !important; background: rgba(255, 255, 255, 0.2) !important; cursor: pointer !important; }\n.timeline-progress { width: 0%; height: 100% !important; background: #ffffff !important; position: relative !important; }\n.volume-toggle { color: #ffffff !important; font-family: sans-serif !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 1px !important; cursor: pointer !important; opacity: 0.7; margin-left: auto !important; margin-bottom: 15px !important; transition: opacity 0.2s !important; }\n.volume-toggle:hover { opacity: 1 !important; }\n.video-click-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: calc(100% - 4px) !important; z-index: 15 !important; cursor: pointer !important; }\n<\/style>\n\n<div class=\"custom-lightbox\" id=\"fullscreenLightbox\">\n    <div class=\"lightbox-content\">\n        <span class=\"lightbox-close\" id=\"closeLightbox\">Retour<\/span>\n        <div class=\"video-click-overlay\" id=\"videoOverlay\"><\/div>\n        <video id=\"lightboxVideo\" playsinline><\/video>\n        <div class=\"custom-player-controls\">\n            <div class=\"volume-toggle\" id=\"volumeToggle\">MUTE<\/div>\n            <div class=\"timeline-container\" id=\"timelineContainer\">\n                <div class=\"timeline-progress\" id=\"timelineProgress\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const cards = document.querySelectorAll('.js-project-card');\n    const lightbox = document.getElementById('fullscreenLightbox');\n    const lightboxVideo = document.getElementById('lightboxVideo');\n    const closeLightbox = document.getElementById('closeLightbox');\n    const videoOverlay = document.getElementById('videoOverlay');\n    const volumeToggle = document.getElementById('volumeToggle');\n    const timelineContainer = document.getElementById('timelineContainer');\n    const timelineProgress = document.getElementById('timelineProgress');\n\n    cards.forEach(card => {\n        const video = card.querySelector('.js-video');\n        if (!video) return;\n        \n        video.muted = true;\n        \n        \/\/ SURVOL : Lance la lecture de la vid\u00e9o courte\n        card.addEventListener('mouseenter', () => { \n            video.play().catch(e => {}); \n        });\n        \n        \/\/ SORTIE : Met pause, remet \u00e0 z\u00e9ro et rappelle l'image avec video.load()\n        card.addEventListener('mouseleave', () => { \n            video.pause(); \n            video.currentTime = 0; \n            video.load(); \n        });\n\n        \/\/ CLIC : Ouvre la vid\u00e9o compl\u00e8te\n        card.addEventListener('click', () => {\n            const filmLourd = card.getAttribute('data-full-video');\n            if(filmLourd) {\n                lightboxVideo.src = filmLourd;\n                lightboxVideo.muted = false; \n                volumeToggle.textContent = \"AUTO\";\n                lightboxVideo.currentTime = 0; \n                lightbox.classList.add('is-active');\n                lightboxVideo.play();\n            }\n        });\n    });\n\n    \/\/ --- CONTR\u00d4LES LIGHTBOX ---\n    videoOverlay.addEventListener('click', () => {\n        if (lightboxVideo.paused) { lightboxVideo.play(); } else { lightboxVideo.pause(); }\n    });\n    volumeToggle.addEventListener('click', () => {\n        if (lightboxVideo.muted) { lightboxVideo.muted = false; volumeToggle.textContent = \"AUTO\";\n        } else { lightboxVideo.muted = true; volumeToggle.textContent = \"MUTE\"; }\n    });\n    lightboxVideo.addEventListener('timeupdate', () => {\n        const percentage = (lightboxVideo.currentTime \/ lightboxVideo.duration) * 100;\n        timelineProgress.style.width = percentage + '%';\n    });\n    timelineContainer.addEventListener('click', (e) => {\n        const rect = timelineContainer.getBoundingClientRect();\n        const clickPositionX = e.clientX - rect.left;\n        const newTime = (clickPositionX \/ rect.width) * lightboxVideo.duration;\n        lightboxVideo.currentTime = newTime;\n    });\n\n    function fermerLightbox() {\n        lightbox.classList.remove('is-active');\n        lightboxVideo.pause();\n        lightboxVideo.src = \"\";\n    }\n    closeLightbox.addEventListener('click', fermerLightbox);\n    document.addEventListener('keydown', (e) => {\n        if (e.key === \"Escape\" && lightbox.classList.contains('is-active')) { fermerLightbox(); }\n    });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Retour MUTE<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2295","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/pages\/2295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2295"}],"version-history":[{"count":391,"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/pages\/2295\/revisions"}],"predecessor-version":[{"id":3485,"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=\/wp\/v2\/pages\/2295\/revisions\/3485"}],"wp:attachment":[{"href":"https:\/\/\u00e9milienplisson.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}