fix(adhesion): play icon cover

assets/images/icons/circle-play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z"/></svg>

assets/sass/adhesion.scss

@@ -1,27 +1,20 @@
-
 .adhesion-body {
     overflow: hidden !important;
     height: 100%;
-}
 
-.root {
+    .root {
         overflow: hidden;
         height: 100%;
 
-    
         display: flex;
         flex-direction: column;
+    }
 
+    .adhesion-container {
+        background: radial-gradient(circle, rgba(0,0,0,0.6) 0%, darken($background, 15%) 100%);
 
-}
-
-.adhesion-container {
-    background-color: black;
         width: 100%;
         flex-grow: 1;
-    // height: 100%;
-    // min-height: 100%;
-    // height: 90vh;
 
         .video-presentation {
             height: 100%;
@@ -31,13 +24,63 @@
             }
         }
 
-}
+    }
 
-.adhesion {
+    .video-presentation-cover {
+        position: relative;
 
-}
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
 
-.adhesion-footer {
+        button {
+            width: 6rem;
+            background: transparent;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+
+            .btn-icon {
+                fill: white;
+            }
+        }
+
+        .video-cover__back {
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            background-color: $background;
+            position: absolute;
+            bottom: 0;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+
+            .back-icon {
+                width: 50%;
+                fill: white;
+                opacity: 0.6;
+                position: relative;
+                top: 0rem;
+            }
+        }
+    }
+
+    .video-cover__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        padding: 3rem;
+
+        color: white;
+        cursor: pointer;
+    }
+
+    .adhesion-footer {
         width: 100%;
         height: auto;
         padding: 1rem 0;
@@ -46,14 +89,14 @@
         display: flex;
         justify-content: center;
         align-items: center;
-}
+    }
 
-.adhesion-btns {
+    .adhesion-btns {
         display: flex;
         justify-content: space-between;
-}
+    }
 
-.btn {
+    .btn {
         background-color: white;
         opacity: 0.8;
         transition: 0.2s all;
@@ -67,9 +110,9 @@
         &:hover {
             opacity: 1;
         }
-}
+    }
 
-.subscribe-button {
+    .subscribe-button {
         text-transform: uppercase;
         display: flex;
         justify-content: center;
@@ -78,10 +121,9 @@
         color: black;
         text-decoration: none;
         padding: .7rem 2rem;
-}
+    }
-
-.socials {
 
+    .socials {
         display: flex;
         list-style-type: none;
         padding: 0;
@@ -114,21 +156,9 @@
             }
 
         }
-}
+    }
 
-// @media (min-height: 800px) and (max-height: 900px) {
+    @media (max-width: $mobile-breakpoint) {
-//     .body {
-//         display: none;
-//     }
-//     .adhesion-container {
-//         height: 76vh !important;
-//     }
-//     .adhesion-footer {
-//         height: 100% !important;
-//     }
-// }
-
-@media (max-width: $mobile-breakpoint) {
         .adhesion-footer {
             height: auto;
         }
@@ -144,10 +174,6 @@
                 justify-content: center;
             }
         }
+    }
 }
 
-// @media (max-width: $xs-breakpoint) {
-//     .adhesion-container {
-//         height: 80vh;
-//     }
-// }

content/adhesion/_index.md

@@ -1,10 +1,12 @@
 ---
-title: "Campagne d'adhésion l'Étoile de Bethléem - 2023-2024"
+title: "Campagne d'adhésion 2023-2024"
 with_header: false
 with_footer: false
 body_class: "adhesion-body"
 with_normal_config: false
-description: Adhérez et soutenez nous !
+description: Découvrez la campagne d'adhésion 2023-2024 de l'association des Amis de la Chapelle de Bethléem à Aubevoye.
 featured_image:
     src: ./images/default_logo.png
 ---
+
+Découvrez la campagne d'adhésion 2023-2024 de l'association des Amis de la Chapelle de Bethléem à Aubevoye.

layouts/adhesion/list.html

@@ -1,22 +1,25 @@
 {{ define "main" }}
 <div class="root">
     <div class="adhesion-container">
-        <div class="video-presentation">
+        <div class="video-presentation video-presentation-cover" id="video-cover">
+            <div class="video-cover__back">
+                {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent" "class" "back-icon") }}
+                <!-- {{ partial "helpers/svg" (dict "path" "all_logos/horizontal_white_transparent" "class" "back-icon") }} -->
+            </div>
+            <div id="video-play-btn" class="video-cover__content">
+                <button>
+                    {{ partial "helpers/svg" (dict "path" "icons/circle-play" "class" "btn-icon") }}
+                </button>
+                <p>Regarder le teaser</p>
+            </div>
+        </div>
+        <div class="video-presentation final-video-presentation" style="display: none;" id="final-video-container">
             <!--     <!-1- <iframe -1-> -->
             <!--     <!-1-     title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem" -1-> -->
             <!--     <!-1-     width="100%" height="950" -1-> -->
             <!--     <!-1-     src="https://peertube.iriseden.eu/videos/embed/575e83c9-2dd5-464c-a31e-c2aae1bfd48b?p2p=0" -1-> -->
             <!--     <!-1-     frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"> -1-> -->
             <!--     <!-1- </iframe> -1-> -->
-        <iframe
-            width="100%"
-            src="https://www.youtube.com/embed/vJeEqDfz_4c"
-            title="YouTube video player"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowfullscreen
-        ></iframe>
-
         </div>
     </div>
     <div class="adhesion-footer">
@@ -57,5 +60,28 @@
 
 </div>
 
+
+<script>
+
+    let iframe_html = `<iframe
+                width="100%"
+                src="https://www.youtube.com/embed/vJeEqDfz_4c?autoplay=1"
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
+            ></iframe>`;
+
+    let btn = document.getElementById("video-play-btn")
+    const video_cover = document.getElementById("video-cover")
+
+    const final_video_container = document.getElementById("final-video-container")
+    btn.onclick = () => {
+        video_cover.style.display = "none"
+        final_video_container.innerHTML = iframe_html
+        final_video_container.style.display = "block"
+    }
+
+</script>
 {{ end }}