EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement facade for video embeds

Browse Source
This commit is contained in:
Björn Fromme
2021-12-28 10:25:12 +01:00
parent c274d0e46c
commit b1aa473b04
6 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+4
View File
@@ -7,6 +7,10 @@ require('picturefill')
import smoothscroll from 'smoothscroll-polyfill'
smoothscroll.polyfill()
// Video lazy loading
import lazyframe from 'lazyframe'
lazyframe('.lazyframe')
// Add pacode to external links
document.addEventListener('DOMContentLoaded', () => {
const configElement = document.getElementById('appconfig')
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+1
View File
@@ -32,6 +32,7 @@
@import "components/teaser";
@import "components/tiles";
@import "components/tooltips";
@import "~lazyframe/src/scss/lazyframe";
}
@layer utilities {
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/YoutubeVideo.html
+6 -5
View File
@@ -1,14 +1,15 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
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="relative w-full aspect-w-16 aspect-h-9">
<iframe class="absolute top-0 left-0 w-full h-full" width="560" height="315" allowfullscreen
src="{ep:uri.video(value: data.header_link, layout: data.layout)}"></iframe>
<div class="lazyframe"
data-vendor="{f:if(condition: '{data.layout} == 0', then: 'youtube_nocookie', else: 'vimeo')}"
data-ratio="16:9"
data-src="{ep:uri.video(value: data.header_link, layout: data.layout)}">
</div>
</f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+4 -3
View File
@@ -200,9 +200,10 @@
<f:render section="Calendar" arguments="{_all}"/>
<f:render partial="Facts" arguments="{facts: product.facts}"/>
<f:if condition="{product.video}">
<div class="relative aspect-w-16 aspect-h-9 mb-4">
<iframe class="absolute top-0 left-0 w-full h-full" width="560" height="315" allowfullscreen
src="{ep:uri.video(value: product.video)}"></iframe>
<div class="lazyframe mb-4"
data-vendor="vimeo"
data-ratio="16:9"
data-src="{ep:uri.video(value: product.video)}">
</div>
</f:if>
<div class="bg-gray-50 p-4 mb-4">