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
package-lock.json
Generated
+11
View File
@@ -22,6 +22,7 @@
"font-awesome": "^4.7.0",
"glightbox": "^3.0.9",
"jquery": "^3.6.0",
"lazyframe": "^2.2.7",
"lazysizes": "^4.1.8",
"leaflet": "^1.7.1",
"normalize.css": "^8.0.1",
@@ -6178,6 +6179,11 @@
"node": ">= 8"
}
},
"node_modules/lazyframe": {
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/lazyframe/-/lazyframe-2.2.7.tgz",
"integrity": "sha512-S4Cj6r+8ePZnH0Izn8Y9+Ht0/xylcKwhXljOwllPI8u6zB9gq9j+9BlxeKx7TNP8W/lovek8s6xQD1sSq5dLDw=="
},
"node_modules/lazysizes": {
"version": "4.1.8",
"resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz",
@@ -15856,6 +15862,11 @@
"integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
"dev": true
},
"lazyframe": {
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/lazyframe/-/lazyframe-2.2.7.tgz",
"integrity": "sha512-S4Cj6r+8ePZnH0Izn8Y9+Ht0/xylcKwhXljOwllPI8u6zB9gq9j+9BlxeKx7TNP8W/lovek8s6xQD1sSq5dLDw=="
},
"lazysizes": {
"version": "4.1.8",
"resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.8.tgz",
package.json
+1
View File
@@ -25,6 +25,7 @@
"font-awesome": "^4.7.0",
"glightbox": "^3.0.9",
"jquery": "^3.6.0",
"lazyframe": "^2.2.7",
"lazysizes": "^4.1.8",
"leaflet": "^1.7.1",
"normalize.css": "^8.0.1",
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">