feat: video content element for epevents

2024-05-31 16:46:06 +02:00
parent e083a9dcd9
commit 613a70989f
7 changed files with 112 additions and 1 deletions
@@ -0,0 +1,30 @@
+.video {
+    @include container();
+    padding-top: 32px;
+    padding-bottom: 32px;
+}
+
+.video__inner {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;
+    background-position: center;
+    background-size: cover;
+
+    iframe {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        border: none;
+    }
+
+    .consent {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
@@ -36,3 +36,4 @@
@import "news";
@import "datepicker";
@import "cookiefirst";
+@import "video";
@@ -0,0 +1,24 @@
+<html data-namespace-typo3-fluid="true" lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
+      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
+
+    <f:layout name="Default"/>
+
+    <f:section name="Main">
+        <div class="video">
+            <div class="video__inner"
+                 style="background-image: url({f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')})">
+                <iframe width="640" height="360" allowfullscreen
+                        data-src="{ep:uri.video(value: data.header_link, layout: data.layout)}"
+                        data-cookiefirst-category="advertising"></iframe>
+                <div class="cookiefirst-disabled-resource">
+                    <div class="consent">
+                        Bitte <a href="#" onclick="CookieFirst.acceptCategory('advertising'); return false" class="underline">Marketing-Cookies akzeptieren</a>, um dieses Video anzusehen.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </f:section>
+
+</html>