Videos from vimeo are now playable if the vimeo cookie is enabled

app/Http/Middleware/SecureHeaders.php

@@ -47,6 +47,7 @@ class SecureHeaders
                 '\'self\'',
                 'https://www.youtube.com',
                 'https://vimeo.com/',
+                'https://player.vimeo.com/',
                 'https://www.google.com/recaptcha/',
                 'https://recaptcha.google.com/recaptcha/'
             ]) . ';',
@@ -72,7 +73,7 @@ class SecureHeaders
         );
         $response->headers->set('Feature-Policy', \implode(',', [
             'fullscreen', 'accelerometer', 'encrypted-media',
-            'gyroscope', 'picture-in-picture', '\'self\''
+            'gyroscope', 'picture-in-picture'
         ]) . ';');
         return $response;
     }

resources/js/main.js

@@ -41,6 +41,49 @@ pages.keys().map(key => {
     });
 });
 
+document.addEventListener('DOMContentLoaded', function () {
+    // * Video frames.
+    const videoFrameList = document.querySelectorAll(".video-frame");
+    for (const videoLink of videoFrameList) {
+        if (!videoLink.dataset.type) {
+            throw new Error("Missing dataset type");
+        }
+        if (!videoLink.dataset.frame) {
+            throw new Error("Missing dataset frame");
+        }
+        // @ts-ignore
+        window.__CN_VIDEO = window.__CN_VIDEO ?? {};
+
+        const newIframe = document.createElement("iframe");
+        newIframe.frameBorder = "0";
+        newIframe.allow = "fullscreen";
+        newIframe.width = "1920px";
+        newIframe.height = "1080px";
+        newIframe.setAttribute("allowfullscreen", "allowfullscreen");
+
+        // @ts-ignore
+        const instance = new FsLightbox();
+        instance.props.sources = [newIframe];
+
+        setTimeout(() => {
+            videoLink.addEventListener("click", (e) => {
+                e.preventDefault();
+
+                // * This comes fslightbox lib
+                // @ts-ignore
+                instance.open();
+                setTimeout(function () {
+                    // @ts-ignore
+                    newIframe.src = window.__CN_VIDEO[videoLink.dataset.type]
+                        ? String(videoLink.href)
+                        : String(videoLink.dataset.frame);
+                }, 50);
+                return false;
+            });
+        }, 300);
+    }
+})
+
 let vueOptions = {
     el: "#app"
 };

resources/sass/front/pages/brand/poultry_pages/_engage.scss

@@ -1 +1,32 @@
+.absolute {
+    position: absolute;
+}
 
+.relative {
+    position: relative;
+}
+
+.vimeo-play-button {
+    top: 50%;
+    left: 50%;
+    font-size: 3rem;
+    transform: translateX(-50%) translateY(-50%);
+    color: #fff;
+}
+
+.top-50 {
+    top: 50%
+}
+
+.left-50 {
+    left: 50%;
+}
+
+@media screen and (min-width: 1230px) {
+    .video-frame > img {
+        height: 14vw;
+        min-height: 22.13112rem;
+        width: 24vw;
+        min-width: 39.12942rem;
+    }
+}

resources/sass/front/pages/brand/poultry_pages/blocs/_bloc2.scss

@@ -8,11 +8,13 @@
         top: 8.666rem;
         left: 0;
         z-index: 1;
+        max-width: 100%;
         & > .video {
-            height: 14vw;
+            max-width: 90vw;
-            min-height: 22.13112rem;
+            height: auto;
-            width: 24vw;
+            & > img {
-            min-width: 39.12942rem;
+                max-width: 100%;
+            }
         }
     }
     & > .content {
@@ -99,15 +101,7 @@
             top: 0;
             left: 50%;
             transform: translateX(-50%);
-            width: 100%;
-            max-width: inherit;
             z-index: 0;
-            & > .video {
-                height: 22.13112rem;
-                width: inherit;
-                min-height: 22.13112rem;
-                min-width: inherit;
-            }
         }
         & > .content {
             position: relative;

resources/views/front/modules/video-vimeo.blade.php

@@ -1,3 +1,8 @@
-<div class="video vimeo" data-authorize="0">
+<a class="video vimeo video-frame" style="display: block" data-type="vimeo" data-frame="{{ route('front.frame', ['type' => 'vimeo']) }}" href="https://player.vimeo.com/video{{ parse_url($url, PHP_URL_PATH) }}" data-authorize="0">
-    <iframe src="/frame/vimeo" data-src="https://player.vimeo.com/video{{ parse_url($url, PHP_URL_PATH) }}" width="100%" height="100%" frameborder="0" allow="fullscreen"></iframe>
+    <img
-</div>
+        src="https://vumbnail.com/{{ parse_url($url, PHP_URL_PATH) }}.jpg"
+        alt="Alt"
+        title="Title"
+    >
+    <i class="vimeo-play-button absolute top-50 left-50 fa fa-regular fa-play-circle"></i>
+</a>

resources/views/front/webldc-cn.blade.php

@@ -41,86 +41,46 @@ $cookies = [];
 
 // YOUTUBE
 $cookies['youtube'] = [
-    'name' => 'VIDEOS - Youtube',
+    'name' => __('cookie-notice.custom.youtube.name'),
-    'description' => __('Les cookies déposés via les services de partage de vidéo ont pour finalité de permettre à l’utilisateur de visionner directement sur le site le contenu multimédia.'),
+    'description' => __('cookie-notice.custom.youtube.name'),
+    'labelLink' => __('cookie-notice.custom.youtube.labelLink'),
     'link' => 'https://policies.google.com/technologies/cookies?hl=fr&utm_source=ucb',
-    'labelLink' => __('En savoir +'),
     'cookies' => ['NID', 'VISITOR_INFO1_LIVE', 'YSC']
 ];
 
 $cookies['youtube']['script'] = <<<SCRIPT
 function () {
-    let frames = document.querySelectorAll('.video.youtube');
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
-    for (let frame of frames) {
+    window.__CN_VIDEO.youtube = true;
-        frame.dataset.authorize = 1;
-        let iframe = frame.querySelector('iframe') ?? frame;
-        if (iframe) {
-            iframe.src = iframe.dataset.src;
-        }
-    }
 }
 SCRIPT;
 $cookies['youtube']['fallback'] = <<<FALLBACK
 function () {
-    let youtubeVids = document.getElementsByClassName('.video.youtube');
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
-    for (let item of youtubeVids) {
+    window.__CN_VIDEO.youtube = false;
-        let a = document.createElement('a');
-        a.innerText = 'Autoriser';
-        a.classList.add('cn-cookie-link');
-        a.classList.add('btn-autorize');
-        a.onclick = function () {
-            CookieNotice.openModal();
-        };
-        let e = document.createElement('p');
-        e.innerHTML = 'Youtube est désactivé. ';
-        item.innerHTML = "";
-        e.appendChild(a);
-        item.appendChild(e);
-    }
 }
 FALLBACK;
 
+
 // VIMEO
 $cookies['vimeo'] = [
-    'name' => 'VIDEOS - Vimeo',
+    'name' => __('cookie-notice.custom.vimeo.name'),
-    'description' => __('Les cookies déposés via les services de partage de vidéo ont pour finalité de permettre à l’utilisateur de visionner directement sur le site le contenu multimédia.'),
+    'description' => __('cookie-notice.custom.vimeo.description'),
+    'labelLink' => __('cookie-notice.custom.vimeo.labelLink'),
     'link' => 'https://vimeo.com/cookie_policy',
-    'labelLink' => __('En savoir +'),
     'cookies' => []
 ];
 
 $cookies['vimeo']['script'] = <<<SCRIPT
 function () {
-    setTimeout(() => {
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
-        let frames = document.querySelectorAll('.video.vimeo');
+    window.__CN_VIDEO.vimeo = true;
-        for (let frame of frames) {
-            frame.dataset.authorize = 1;
-            let iframe = frame.querySelector('iframe');
-            iframe = iframe ? iframe : frame;
-            if (iframe) {
-                iframe.src = iframe.dataset.src;
-            }
-        }
-    }, 200)
 }
 SCRIPT;
 $cookies['vimeo']['fallback'] = <<<FALLBACK
 function () {
-    let vimeoVids = document.getElementsByClassName('.video.vimeo');
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
-    for (let item of vimeoVids) {
+    window.__CN_VIDEO.vimeo = false;
-        let a = document.createElement('a');
-        a.innerText = 'Autoriser';
-        a.classList.add('cn-cookie-link');
-        a.classList.add('btn-autorize');
-        a.onclick = function () {
-            CookieNotice.openModal();
-        };
-        let e = document.createElement('p');
-        e.innerHTML = 'Vimeo est désactivé. ';
-        item.innerHTML = "";
-        e.appendChild(a);
-        item.appendChild(e);
-    }
 }
 FALLBACK;
 
@@ -241,23 +201,26 @@ SCRIPT;
 
 @push('scripts')
 <script nonce="{{ $nonce ?? '' }}">
-window.WebCookieNotice = {};
+document.addEventListener('DOMContentLoaded', function () {
-@foreach($cookies as $index_name => $cookie)
+    window.WebCookieNotice = {};
-window.WebCookieNotice['{{ $index_name }}'] = {};
+    @foreach($cookies as $index_name => $cookie)
-window.WebCookieNotice['{{ $index_name }}'].tmp = {};
+    window.WebCookieNotice['{{ $index_name }}'] = {};
-// SCRIPT
+    window.WebCookieNotice['{{ $index_name }}'].tmp = {};
-window.WebCookieNotice['{{ $index_name }}'].tmp.script = {!! strip_tags($cookie['script']) !!};
+    // SCRIPT
-@php unset($cookie['script']); @endphp
+    window.WebCookieNotice['{{ $index_name }}'].tmp.script = {!! strip_tags($cookie['script']) !!};
-// FALLBACK
+    @php unset($cookie['script']); @endphp
-@if(isset($cookie['fallback']))
+    // FALLBACK
-window.WebCookieNotice['{{ $index_name }}'].tmp.fallback = {!! strip_tags($cookie['fallback']) !!};
+    @if(isset($cookie['fallback']))
-@php unset($cookie['fallback']); @endphp
+    window.WebCookieNotice['{{ $index_name }}'].tmp.fallback = {!! strip_tags($cookie['fallback']) !!};
-@endif
+    @php unset($cookie['fallback']); @endphp
-window.WebCookieNotice['{{ $index_name }}'].conf = @json($cookie);
+    @endif
-window.WebCookieNotice['{{ $index_name }}'].conf.script = window.WebCookieNotice['{{ $index_name }}'].tmp.script;
+    window.WebCookieNotice['{{ $index_name }}'].conf = @json($cookie);
-window.WebCookieNotice['{{ $index_name }}'].conf.fallback = window.WebCookieNotice['{{ $index_name }}'].tmp.fallback;
+    window.WebCookieNotice['{{ $index_name }}'].conf.script = window.WebCookieNotice['{{ $index_name }}'].tmp.script;
-window.WebCookieNotice['{{ $index_name }}'] = window.WebCookieNotice['{{ $index_name }}'].conf;
+    window.WebCookieNotice['{{ $index_name }}'].conf.fallback = window.WebCookieNotice['{{ $index_name }}'].tmp.fallback;
-@endforeach
+    window.WebCookieNotice['{{ $index_name }}'] = window.WebCookieNotice['{{ $index_name }}'].conf;
-window.WebCookieNotice = new CookieNotice(window.WebCookieNotice);
+    @endforeach
+    window.WebCookieNotice = new CookieNotice(window.WebCookieNotice);
+});
 </script>
 @endpush
+

resources/views/layouts/app-head.blade.php

@@ -51,4 +51,4 @@
 <!-- STYLES -->
 <link rel="stylesheet" href="{{ mix('css/preload-main.css') }}">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
-@stack('styles')
+@stack('styles')