diff --git a/README.md b/README.md
index 0fe7bd7dc9dcdc521ecb981b3368140afb35adaf..04a54c8559553906c27eb237f65079edbfe5be36 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,7 @@ key from the "TypoScript integration" topic.
### Making changes in JavaScript/CSS
We are shipping the extension with source files and already minified assets. By default,
-we the minified assets are loaded in the Layout, so that the extension works out of the box just with plug and play.
+the minified assets are loaded in the Layout, so that the extension works out of the box just with plug and play.
Should you want to change this behavior, you can do the following:
- Override the layout path in TypoScript
@@ -100,6 +100,7 @@ plugin.tx_sgyoutube {
- Initialize the javascript modules in your main.js: `
new SgVideoLightbox();
SgVideo.initDefault();`
+- If you want to recompile the JS with SGC, you must add `excludeFromQa: ['!**/Backend/**/*']` to your .sgc-config.js and also set your main extension in extensions to sg-youtube `extensions: ['sg-youtube']`
### Compiling SASS only without SGC
diff --git a/Resources/Private/Templates/Bootstrap5/Youtube/Index.html b/Resources/Private/Templates/Bootstrap5/Youtube/Index.html
index 86e2565936fdfdd8a3759e52a9d34ec5f7409688..27ad4460605d72e77d1f0adbfcc5c715b6e03bed 100644
--- a/Resources/Private/Templates/Bootstrap5/Youtube/Index.html
+++ b/Resources/Private/Templates/Bootstrap5/Youtube/Index.html
@@ -27,7 +27,6 @@
</div>
</f:if>
</div>
-
</f:if>
<f:if condition="{notFound}">
@@ -78,7 +77,7 @@
<f:if condition="{filtersBottom} || {submitButton.position} == 'bottom' || {submitButton.position} == 'both'">
<div class="sg-video-filters sg-video-filters-bottom gap-2 d-flex align-items-baseline">
<f:for each="{filtersBottom}" as="filter">
- <f:render partial="{filter.partial}" arguments="{name: filter.name, label: filter.label}" />
+ <f:render partial="{filter.partial}" arguments="{filter: filter, pluginId: pluginContentData.uid, filterValues: filterValues}" />
</f:for>
<f:if condition="{submitButton.position} == 'bottom' || {submitButton.position} == 'both'">
@@ -163,7 +162,9 @@
<f:section name="videoItem">
<f:variable name="urlParameters">{f:if(condition: '{settings.urlParameters}', then: '{settings.urlParameters}', else: '{settings.globalUrlParameters}')}</f:variable>
- <f:variable name="feedItemUrl"><vi:urlWithQueryParameters url="{feedItem.url}" parameters="{urlParameters}" /></f:variable>
+ <f:variable name="feedItemUrl">
+ <vi:urlWithQueryParameters url="{feedItem.url}" parameters="{urlParameters}" />
+ </f:variable>
<f:variable name="feedItemId">{contentUid}-{settings.id}-{feedIterator}</f:variable>
<f:variable name="hasText"><f:if condition="{settings.showTitle} || {settings.showDescription}">1</f:if></f:variable>
<f:variable name="hasDescription"><f:if condition="{settings.showDescription} && {feedItem.description}">1</f:if></f:variable>
@@ -173,7 +174,7 @@
<div class="sg-video__item {itemClasses}">
<f:if condition="{feedItem.thumbnail}">
- <a class="sg-video-item overflow-hidden text-light sg-video__link position-relative {f:if(condition: '!{hasText} || {isRowsLayout}', then: 'rounded')} {f:if(condition: '{isRowsLayout}', then: 'col-12 col-sm-3 shadow', else: 'card-img-top')}" href="{feedItemUrl}" data-disable-lightbox="{settings.disableLightbox}" target="_blank" data-disable-lightbox-mobile="{settings.disableLightboxMobile}" data-additional-url-parameters="{urlParameters}" data-video-type="youtube" data-is-shorts="{settings.isShorts}">
+ <a class="sg-video-item overflow-hidden text-light sg-video__link position-relative {f:if(condition: '!{hasText} || {isRowsLayout}', then: 'rounded')} {f:if(condition: '{isRowsLayout}', then: 'col-12 col-sm-3 shadow', else: 'card-img-top')}" href="{feedItemUrl}" data-disable-lightbox="{settings.disableLightbox}" target="_blank" data-disable-lightbox-mobile="{settings.disableLightboxMobile}" data-additional-url-parameters="{urlParameters}" data-video-type="youtube">
<div class="sg-video__svg position-absolute top-50p start-50p translate-middle z-1">
<span class="sg-video__svg-inner d-flex shadow text-bg-black bg-opacity-50 rounded-circle justify-content-center p-2">
<vi:renderSvg color="currentColor" name="solid-play" width="24" height="24"></vi:renderSvg>
@@ -183,10 +184,10 @@
<div class="overflow-hidden">
<f:if condition="{feedItem.thumbnailImageObject}">
<f:then>
- <vi:picture class="sg-video__image object-fit-cover h-100 w-100{f:if(condition: '{settings.isShorts}', then: ' sg-video__image--shorts')}" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnailImageObject}" alt="{feedItem.title}" />
+ <vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnailImageObject}" alt="{feedItem.title}" />
</f:then>
<f:else>
- <vi:picture class="sg-video__image object-fit-cover h-100 w-100{f:if(condition: '{settings.isShorts}', then: ' sg-video__image--shorts')}" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnail}" alt="{feedItem.title}" treatIdAsReference="TRUE" />
+ <vi:picture class="sg-video__image object-fit-cover h-100 w-100" width="{thumbnailWidth}" height="{thumbnailHeight}" image="{feedItem.thumbnail}" alt="{feedItem.title}" treatIdAsReference="TRUE" />
</f:else>
</f:if>
</div>
diff --git a/Resources/Private/Templates/Youtube/Index.html b/Resources/Private/Templates/Youtube/Index.html
index b82e228c5b887730c30b177d84e34e0ee008f13b..1e162c787b26af1c6f616b80e3438c783a1d0925 100644
--- a/Resources/Private/Templates/Youtube/Index.html
+++ b/Resources/Private/Templates/Youtube/Index.html
@@ -34,34 +34,73 @@
{yt:structuredVideoData(videoArray: '{feed}', arrayType: 'youtube')}
<f:comment><!--Set the layout to single if there is only one item.--></f:comment>
- <div class="sg-video {f:if(condition: '{feedCount} > 1', then: '{classes}', else: 'sg-video--single')}">
- <f:if condition="{feedCount} < 2">
- <f:then>
- <f:render section="videoItem" arguments="{
- feedItem: feed.0,
- titleChars: settings.maxTitleChars,
- descChars: settings.maxDescriptionChars
- }"/>
- </f:then>
- <f:else>
- <f:if condition="{feedCount} < 4">
- <f:then>
- <f:render section="list" arguments="{_all}"/>
- </f:then>
- <f:else>
- <f:switch expression="{settings.layout}">
- <f:case value="playlist">
- <f:render section="list-playlist" arguments="{_all}"/>
- </f:case>
- <f:defaultCase>
- <f:render section="list" arguments="{_all}"/>
- </f:defaultCase>
- </f:switch>
- </f:else>
- </f:if>
- </f:else>
- </f:if>
- </div>
+ <form>
+ <div class="row">
+ <f:if condition="{filtersTop} || {submitButton.position} == 'top' || {submitButton.position} == 'both'">
+ <div class="sg-video-filters sg-video-filters-top gap-2 d-flex align-items-baseline">
+ <f:for each="{filtersTop}" as="filter">
+ <f:render partial="{filter.partial}" arguments="{filter: filter, pluginId: pluginContentData.uid, filterValues: filterValues}" />
+ </f:for>
+
+ <f:if condition="{submitButton.position} == top || {submitButton.position} == 'both'">
+ <div class="sg-video-submit-filters sg-video-submit-filters-top">
+ <button class="{submitButton.cssClass}" type="submit">{f:translate(key: submitButton.label)}</button>
+ </div>
+ </f:if>
+ </div>
+ </f:if>
+
+ <f:if condition="{notFound}">
+ <f:then>
+ <f:render partial="NotFound" arguments="{name: filter.name, label: filter.label}" />
+ </f:then>
+ <f:else>
+ <div class="sg-video {f:if(condition: '{feedCount} > 1', then: '{classes}', else: 'sg-video--single')}">
+ <f:if condition="{feedCount} < 2">
+ <f:then>
+ <f:render section="videoItem" arguments="{
+ feedItem: feed.0,
+ titleChars: settings.maxTitleChars,
+ descChars: settings.maxDescriptionChars
+ }"/>
+ </f:then>
+ <f:else>
+ <f:if condition="{feedCount} < 4">
+ <f:then>
+ <f:render section="list" arguments="{_all}"/>
+ </f:then>
+ <f:else>
+ <f:switch expression="{settings.layout}">
+ <f:case value="playlist">
+ <f:render section="list-playlist" arguments="{_all}"/>
+ </f:case>
+ <f:defaultCase>
+ <f:render section="list" arguments="{_all}"/>
+ </f:defaultCase>
+ </f:switch>
+ </f:else>
+ </f:if>
+ </f:else>
+ </f:if>
+ </div>
+ </f:else>
+ </f:if>
+
+ <f:if condition="{filtersBottom} || {submitButton.position} == 'bottom' || {submitButton.position} == 'both'">
+ <div class="sg-video-filters sg-video-filters-bottom gap-2 d-flex align-items-baseline">
+ <f:for each="{filtersBottom}" as="filter">
+ <f:render partial="{filter.partial}" arguments="{filter: filter, pluginId: pluginContentData.uid, filterValues: filterValues}" />
+ </f:for>
+
+ <f:if condition="{submitButton.position} == 'bottom' || {submitButton.position} == 'both'">
+ <div class="sg-video-submit-filters sg-video-submit-filters-bottom">
+ <button class="{submitButton.cssClass}" type="submit">{f:translate(key: submitButton.label)}</button>
+ </div>
+ </f:if>
+ </div>
+ </f:if>
+ </div>
+ </form>
</f:section>
<f:section name="list">
diff --git a/Resources/Public/JavaScript/Dist/main.bundled.min.js b/Resources/Public/JavaScript/Dist/main.bundled.min.js
index 307c6f9e03e587877aa65566bbecfb6690cf6f85..8db1b8849616d42705de3d49dc22bb5ee701e813 100644
--- a/Resources/Public/JavaScript/Dist/main.bundled.min.js
+++ b/Resources/Public/JavaScript/Dist/main.bundled.min.js
@@ -1,8 +1,441 @@
-(()=>{var A=Object.create;var x=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var g=(n=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(n,{get:(e,t)=>(typeof require<"u"?require:e)[t]}):n)(function(n){if(typeof require<"u")return require.apply(this,arguments);throw new Error('Dynamic require of "'+n+'" is not supported')});var C=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports);var P=(n,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of M(e))!$.call(n,o)&&o!==t&&x(n,o,{get:()=>e[o],enumerable:!(i=I(e,o))||i.enumerable});return n};var k=(n,e,t)=>(t=n!=null?A(U(n)):{},P(e||!n||!n.__esModule?x(t,"default",{value:n,enumerable:!0}):t,n));var L=C((w,v)=>{(function(n){typeof w=="object"&&typeof v<"u"?v.exports=n():typeof define=="function"&&define.amd?define([],n):(typeof window<"u"||typeof window<"u"?window:typeof self<"u"?self:this).basicLightbox=n()})(function(){return function n(e,t,i){function o(s,d){if(!t[s]){if(!e[s]){var p=typeof g=="function"&&g;if(!d&&p)return p(s,!0);if(a)return a(s,!0);var h=new Error("Cannot find module '"+s+"'");throw h.code="MODULE_NOT_FOUND",h}var r=t[s]={exports:{}};e[s][0].call(r.exports,function(u){return o(e[s][1][u]||u)},r,r.exports,n,e,t,i)}return t[s].exports}for(var a=typeof g=="function"&&g,c=0;c<i.length;c++)o(i[c]);return o}({1:[function(n,e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.create=t.visible=void 0;var i=function(c){var s=arguments.length>1&&arguments[1]!==void 0&&arguments[1],d=document.createElement("div");return d.innerHTML=c.trim(),s===!0?d.children:d.firstChild},o=function(c,s){var d=c.children;return d.length===1&&d[0].tagName===s},a=function(c){return(c=c||document.querySelector(".basicLightbox"))!=null&&c.ownerDocument.body.contains(c)===!0};t.visible=a,t.create=function(c,s){var d=function(r,u){var m=i(`
- <div class="basicLightbox `.concat(u.className,`">
- <div class="basicLightbox__placeholder" role="dialog"></div>
- </div>
- `)),b=m.querySelector(".basicLightbox__placeholder");r.forEach(function(T){return b.appendChild(T)});var _=o(b,"IMG"),E=o(b,"VIDEO"),q=o(b,"IFRAME");return _===!0&&m.classList.add("basicLightbox--img"),E===!0&&m.classList.add("basicLightbox--video"),q===!0&&m.classList.add("basicLightbox--iframe"),m}(c=function(r){var u=typeof r=="string",m=r instanceof HTMLElement==1;if(u===!1&&m===!1)throw new Error("Content must be a DOM element/node or string");return u===!0?Array.from(i(r,!0)):r.tagName==="TEMPLATE"?[r.content.cloneNode(!0)]:Array.from(r.children)}(c),s=function(){var r=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};if((r=Object.assign({},r)).closable==null&&(r.closable=!0),r.className==null&&(r.className=""),r.onShow==null&&(r.onShow=function(){}),r.onClose==null&&(r.onClose=function(){}),typeof r.closable!="boolean")throw new Error("Property `closable` must be a boolean");if(typeof r.className!="string")throw new Error("Property `className` must be a string");if(typeof r.onShow!="function")throw new Error("Property `onShow` must be a function");if(typeof r.onClose!="function")throw new Error("Property `onClose` must be a function");return r}(s)),p=function(r){return s.onClose(h)!==!1&&function(u,m){return u.classList.remove("basicLightbox--visible"),setTimeout(function(){return a(u)===!1||u.parentElement.removeChild(u),m()},410),!0}(d,function(){if(typeof r=="function")return r(h)})};s.closable===!0&&d.addEventListener("click",function(r){r.target===d&&p()});var h={element:function(){return d},visible:function(){return a(d)},show:function(r){return s.onShow(h)!==!1&&function(u,m){return document.body.appendChild(u),setTimeout(function(){requestAnimationFrame(function(){return u.classList.add("basicLightbox--visible"),m()})},10),!0}(d,function(){if(typeof r=="function")return r(h)})},close:p};return h}},{}]},{},[1])(1)})});var y=k(L()),l=class{constructor(){let e=document.querySelectorAll(".sg-video-item"),t=window.matchMedia("(max-width: 679px)").matches;e.forEach(i=>{(i.dataset.disableLightboxMobile==="1"&&t||i.dataset.disableLightbox==="1"&&!t)&&(i.classList.remove("sg-video-item"),i.addEventListener("click",l.disableLightbox.bind(this)))}),Array.prototype.forEach.call(document.querySelectorAll(".sg-video-item"),i=>{i.addEventListener("click",l.openLightbox)})}static openLightbox(e){var t,i;switch(e.preventDefault(),(i=(t=e.target.closest("a"))==null?void 0:t.dataset)==null?void 0:i.videoType){case"youtube":{l.openYouTubeLightBox(e);break}case"vimeo":{l.openVimeoLightBox(e);break}default:}}static disableLightbox(e){var t,i;switch(e.preventDefault(),(i=(t=e.target.closest("a"))==null?void 0:t.dataset)==null?void 0:i.videoType){case"youtube":{l.disableYouTubeLightbox(e);break}case"vimeo":{l.disableVimeoLightbox(e);break}default:}}static openVimeoLightBox(e){let t=e.target.closest(".sg-video-item").href;t=l.includeAdditionalUrlParameters(t,e.target.closest("a").dataset.additionalUrlParameters),t+="&autoplay=1&dnt=1",y.create(`<iframe class="sg-video-iframe sg-video-vimeo-iframe mfp-iframe" frameborder="0" allowfullscreen allow="autoplay; fullscreen *; picture-in-picture" src="${t}"></iframe>`,{closable:!0}).show()}static openYouTubeLightBox(e){let t=e.target.closest(".sg-video-item").href;t=`https://www.youtube-nocookie.com/embed/${l.getYouTubeVideoIdFromUrl(t)}`,t=l.includeAdditionalUrlParameters(t,e.target.closest("a").dataset.additionalUrlParameters),y.create(`
+(() => {
+ var __create = Object.create;
+ var __defProp = Object.defineProperty;
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+ var __getOwnPropNames = Object.getOwnPropertyNames;
+ var __getProtoOf = Object.getPrototypeOf;
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
+ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+ get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+ }) : x)(function(x) {
+ if (typeof require !== "undefined")
+ return require.apply(this, arguments);
+ throw new Error('Dynamic require of "' + x + '" is not supported');
+ });
+ var __commonJS = (cb, mod) => function __require2() {
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+ };
+ var __copyProps = (to, from, except, desc) => {
+ if (from && typeof from === "object" || typeof from === "function") {
+ for (let key of __getOwnPropNames(from))
+ if (!__hasOwnProp.call(to, key) && key !== except)
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+ }
+ return to;
+ };
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+ mod
+ ));
+
+ // vendor/sgalinski/sg-youtube/node_modules/basiclightbox/dist/basicLightbox.min.js
+ var require_basicLightbox_min = __commonJS({
+ "vendor/sgalinski/sg-youtube/node_modules/basiclightbox/dist/basicLightbox.min.js"(exports, module) {
+ !function(e) {
+ if ("object" == typeof exports && "undefined" != typeof module)
+ module.exports = e();
+ else if ("function" == typeof define && define.amd)
+ define([], e);
+ else {
+ ("undefined" != typeof window ? window : "undefined" != typeof window ? window : "undefined" != typeof self ? self : this).basicLightbox = e();
+ }
+ }(function() {
+ return function e(n, t, o) {
+ function r(c2, u) {
+ if (!t[c2]) {
+ if (!n[c2]) {
+ var s = "function" == typeof __require && __require;
+ if (!u && s)
+ return s(c2, true);
+ if (i)
+ return i(c2, true);
+ var a = new Error("Cannot find module '" + c2 + "'");
+ throw a.code = "MODULE_NOT_FOUND", a;
+ }
+ var l = t[c2] = { exports: {} };
+ n[c2][0].call(l.exports, function(e2) {
+ return r(n[c2][1][e2] || e2);
+ }, l, l.exports, e, n, t, o);
+ }
+ return t[c2].exports;
+ }
+ for (var i = "function" == typeof __require && __require, c = 0; c < o.length; c++)
+ r(o[c]);
+ return r;
+ }({ 1: [function(e, n, t) {
+ "use strict";
+ Object.defineProperty(t, "__esModule", { value: true }), t.create = t.visible = void 0;
+ var o = function(e2) {
+ var n2 = arguments.length > 1 && void 0 !== arguments[1] && arguments[1], t2 = document.createElement("div");
+ return t2.innerHTML = e2.trim(), true === n2 ? t2.children : t2.firstChild;
+ }, r = function(e2, n2) {
+ var t2 = e2.children;
+ return 1 === t2.length && t2[0].tagName === n2;
+ }, i = function(e2) {
+ return null != (e2 = e2 || document.querySelector(".basicLightbox")) && true === e2.ownerDocument.body.contains(e2);
+ };
+ t.visible = i;
+ t.create = function(e2, n2) {
+ var t2 = function(e3, n3) {
+ var t3 = o('\n <div class="basicLightbox '.concat(n3.className, '">\n <div class="basicLightbox__placeholder" role="dialog"></div>\n </div>\n ')), i2 = t3.querySelector(".basicLightbox__placeholder");
+ e3.forEach(function(e4) {
+ return i2.appendChild(e4);
+ });
+ var c2 = r(i2, "IMG"), u2 = r(i2, "VIDEO"), s = r(i2, "IFRAME");
+ return true === c2 && t3.classList.add("basicLightbox--img"), true === u2 && t3.classList.add("basicLightbox--video"), true === s && t3.classList.add("basicLightbox--iframe"), t3;
+ }(e2 = function(e3) {
+ var n3 = "string" == typeof e3, t3 = e3 instanceof HTMLElement == 1;
+ if (false === n3 && false === t3)
+ throw new Error("Content must be a DOM element/node or string");
+ return true === n3 ? Array.from(o(e3, true)) : "TEMPLATE" === e3.tagName ? [e3.content.cloneNode(true)] : Array.from(e3.children);
+ }(e2), n2 = function() {
+ var e3 = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+ if (null == (e3 = Object.assign({}, e3)).closable && (e3.closable = true), null == e3.className && (e3.className = ""), null == e3.onShow && (e3.onShow = function() {
+ }), null == e3.onClose && (e3.onClose = function() {
+ }), "boolean" != typeof e3.closable)
+ throw new Error("Property `closable` must be a boolean");
+ if ("string" != typeof e3.className)
+ throw new Error("Property `className` must be a string");
+ if ("function" != typeof e3.onShow)
+ throw new Error("Property `onShow` must be a function");
+ if ("function" != typeof e3.onClose)
+ throw new Error("Property `onClose` must be a function");
+ return e3;
+ }(n2)), c = function(e3) {
+ return false !== n2.onClose(u) && function(e4, n3) {
+ return e4.classList.remove("basicLightbox--visible"), setTimeout(function() {
+ return false === i(e4) || e4.parentElement.removeChild(e4), n3();
+ }, 410), true;
+ }(t2, function() {
+ if ("function" == typeof e3)
+ return e3(u);
+ });
+ };
+ true === n2.closable && t2.addEventListener("click", function(e3) {
+ e3.target === t2 && c();
+ });
+ var u = { element: function() {
+ return t2;
+ }, visible: function() {
+ return i(t2);
+ }, show: function(e3) {
+ return false !== n2.onShow(u) && function(e4, n3) {
+ return document.body.appendChild(e4), setTimeout(function() {
+ requestAnimationFrame(function() {
+ return e4.classList.add("basicLightbox--visible"), n3();
+ });
+ }, 10), true;
+ }(t2, function() {
+ if ("function" == typeof e3)
+ return e3(u);
+ });
+ }, close: c };
+ return u;
+ };
+ }, {}] }, {}, [1])(1);
+ });
+ }
+ });
+
+ // vendor/sgalinski/sg-youtube/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
+ var BasicLightbox = __toESM(require_basicLightbox_min());
+ var SgVideoLightbox = class {
+ constructor() {
+ const videoItems = document.querySelectorAll(".sg-video-item");
+ const isMobile = window.matchMedia("(max-width: 679px)").matches;
+ videoItems.forEach((item) => {
+ if (item.dataset.disableLightboxMobile === "1" && isMobile || item.dataset.disableLightbox === "1" && !isMobile) {
+ item.classList.remove("sg-video-item");
+ item.addEventListener("click", SgVideoLightbox.disableLightbox.bind(this));
+ }
+ });
+ Array.prototype.forEach.call(document.querySelectorAll(".sg-video-item"), (element) => {
+ element.addEventListener("click", SgVideoLightbox.openLightbox);
+ });
+ }
+ static openLightbox(event) {
+ var _a, _b, _c, _d;
+ event.preventDefault();
+ const isShorts = ((_b = (_a = event.target.closest("a")) == null ? void 0 : _a.dataset) == null ? void 0 : _b.isShorts) === "1";
+ switch ((_d = (_c = event.target.closest("a")) == null ? void 0 : _c.dataset) == null ? void 0 : _d.videoType) {
+ case "youtube": {
+ SgVideoLightbox.openYouTubeLightBox(event, isShorts);
+ break;
+ }
+ case "vimeo": {
+ SgVideoLightbox.openVimeoLightBox(event);
+ break;
+ }
+ default:
+ }
+ }
+ static disableLightbox(event) {
+ var _a, _b, _c, _d;
+ event.preventDefault();
+ const isShorts = ((_b = (_a = event.target.closest("a")) == null ? void 0 : _a.dataset) == null ? void 0 : _b.isShorts) === "1";
+ switch ((_d = (_c = event.target.closest("a")) == null ? void 0 : _c.dataset) == null ? void 0 : _d.videoType) {
+ case "youtube": {
+ SgVideoLightbox.disableYouTubeLightbox(event, isShorts);
+ break;
+ }
+ case "vimeo": {
+ SgVideoLightbox.disableVimeoLightbox(event);
+ break;
+ }
+ default:
+ }
+ }
+ static openVimeoLightBox(event) {
+ let url = event.target.closest(".sg-video-item").href;
+ url = SgVideoLightbox.includeAdditionalUrlParameters(
+ url,
+ event.target.closest("a").dataset.additionalUrlParameters
+ );
+ url += "&autoplay=1&dnt=1";
+ const instance = BasicLightbox.create(
+ `<iframe class="sg-video-iframe sg-video-vimeo-iframe mfp-iframe" frameborder="0" allowfullscreen allow="autoplay; fullscreen *; picture-in-picture" src="${url}"></iframe>`,
+ {
+ closable: true
+ }
+ );
+ instance.show();
+ }
+ static openYouTubeLightBox(event, isShorts) {
+ let url = event.target.closest(".sg-video-item").href;
+ const videoId = SgVideoLightbox.getYouTubeVideoIdFromUrl(url);
+ url = `https://www.youtube-nocookie.com/embed/${videoId}`;
+ url = SgVideoLightbox.includeAdditionalUrlParameters(
+ url,
+ event.target.closest("a").dataset.additionalUrlParameters
+ );
+ const iframeClass = isShorts ? "sg-video-iframe sg-video-youtube-iframe sg-video-youtube-shorts-iframe" : "sg-video-iframe sg-video-youtube-iframe";
+ const instance = BasicLightbox.create(
+ `
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
- class="sg-video-iframe sg-video-youtube-iframe" src="${t}"></iframe>
- `,{closable:!0}).show()}static disableYouTubeLightbox(e){e.preventDefault();let t=e.currentTarget;t.classList.add("no-lightbox");let i=l.includeAdditionalUrlParameters(l.getYouTubeVideoIdFromUrl(t.href),t.dataset.additionalUrlParameters),o=t.querySelector(".sg-video__image"),a=o.offsetHeight,c=o.offsetWidth,s=document.createElement("iframe");s.width=c,s.height=a,s.style.border="none",s.allowFullscreen=!0,s.allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",s.src=`https://www.youtube-nocookie.com/embed/${i}`,o.parentElement.nodeName.toLowerCase()==="picture"?o.parentElement.replaceWith(s):o.replaceWith(s)}static disableVimeoLightbox(e){e.preventDefault();let t=e.currentTarget.closest(".sg-video__item"),i=t.querySelector("a");t.classList.add("no-lightbox");let o=l.includeAdditionalUrlParameters(i.href,i.dataset.additionalUrlParameters),a=t.querySelector(".sg-video__image"),c=a==null?void 0:a.clientWidth,s=a==null?void 0:a.clientHeight,d=document.createRange().createContextualFragment(`<div class="sg-video-item sg-card-shadow" style="height: ${s}px; width: ${c}px;"><div class="embed-container" style="padding-bottom: calc(${s} / ${c} * 100%);"><iframe width="${c}" height="${s}" src="${o}&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div>`);a==null||a.replaceWith(d)}static getVimeoVideoIdFromUrl(e){return/^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?(\d+)/.exec(e)[5]}static getYouTubeVideoIdFromUrl(e){let t=e.match(/watch\?v=(.*)&list=(.*)/);if(!t&&(t=e.match(/watch\?v=([^&?]*)/),!t))return null;let[,i]=t,o="?";return t[2]&&(i+=`?list=${t[2]}`,o="&"),`${i+o}autoplay=1&rel=0`}static includeAdditionalUrlParameters(e,t=""){if(!e)return"";if(!t)return e;let i=t,o=i.charAt(0)==="?",a=i.charAt(0)==="&";return(o||a)&&(i=i.slice(1)),e.includes("?")?`${e}&${i}`:`${e}?${i}`}};var f=class{constructor(e,t){this.settings=t,this.dom={list:e,listItems:e.querySelectorAll(".sg-video__item")},this.active=0,this.dom.listItems.forEach((i,o)=>{this.setupReadMore(o)}),this.settings.disableMinHeight||this.checkImageSizes()}static initDefault(){document.querySelectorAll(".sg-video__list--default").forEach(e=>{new f(e,{textSelector:".sg-video__bodytext",descriptionSelector:".sg-video__description",type:"default"})}),document.querySelectorAll(".sg-video__list--rows").forEach(e=>{new f(e,{textSelector:".sg-video__description",descriptionSelector:".sg-video__description",disableMinHeight:!0})}),document.querySelectorAll(".sg-video__list--playlist").forEach(e=>{new f(e,{textSelector:".sg-video__description",descriptionSelector:".sg-video__description",disableMinHeight:!0})}),document.querySelectorAll(".sg-video__highlight").forEach(e=>{new f(e,{textSelector:".sg-video__bodytext",descriptionSelector:".sg-video__description",disableMinHeight:!0})}),document.querySelectorAll(".sg-video--single").forEach(e=>{new f(e,{textSelector:".sg-video__description",descriptionSelector:".sg-video__description"})})}checkImageSizes(){let e=0,t=[];this.dom.listItems.forEach(i=>{let o=i.querySelector("img");o&&o.height>e&&(e=o.height),t.push(o)}),t.forEach(i=>{i.style.minHeight=`${e}px`})}setupReadMore(e){let t=this.dom.listItems[e],i=t.querySelector(".sg-video__read-more"),o=t.querySelector(this.settings.textSelector);if(!o){i&&i.classList.add("disabled");return}if(!!i){if(f.isTextTruncated(o,this.settings)){i.classList.add("disabled");return}i.addEventListener("click",()=>this.showText(e))}}showText(e){let t=this.dom.listItems[e];if(t.classList.contains("expanded")){this.active-=1,this.hideText(e);return}this.active+=1;let i=t.querySelector(".sg-video__read-more"),o=t.querySelector(this.settings.textSelector),a=o.matches(this.settings.descriptionSelector)?o:o.querySelector(this.settings.descriptionSelector);t.classList.add("expanded"),o.classList.add("expanded"),a.classList.add("expanded"),i.classList.add("expanded"),i.querySelector(".sg-video__read-more-text").textContent=i.dataset.buttonCloseText}hideText(e){let t=this.dom.listItems[e],i=t.querySelector(".sg-video__read-more"),o=t.querySelector(this.settings.textSelector),a=o.matches(this.settings.descriptionSelector)?o:o.querySelector(this.settings.descriptionSelector);o.classList.remove("expanded"),a.classList.remove("expanded"),i.classList.remove("expanded"),i.querySelector(".sg-video__read-more-text").textContent=i.dataset.buttonOpenText,setTimeout(()=>{this.settings.type==="default"&&this.active===0&&this.dom.listItems.forEach(c=>{c.style.height="",c.style.zIndex=""}),t.classList.remove("expanded")},200)}static isTextTruncated(e,t){let i=e.matches(t.descriptionSelector)?e:e.querySelector(t.descriptionSelector);return i&&i.scrollHeight<=i.clientHeight}};function S(){new l,f.initDefault()}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",S):S();})();
+ class="${iframeClass}" src="${url}"></iframe>
+ `,
+ {
+ closable: true
+ }
+ );
+ instance.show();
+ }
+ static disableYouTubeLightbox(event, isShorts) {
+ event.preventDefault();
+ const item = event.currentTarget;
+ item.classList.add("no-lightbox");
+ const videoId = SgVideoLightbox.includeAdditionalUrlParameters(
+ SgVideoLightbox.getYouTubeVideoIdFromUrl(item.href),
+ item.dataset.additionalUrlParameters
+ );
+ const videoImage = item.querySelector(".sg-video__image");
+ const originalWidth = videoImage.offsetWidth;
+ const originalHeight = videoImage.offsetHeight;
+ let iframeWidth = originalWidth;
+ let iframeHeight = originalHeight;
+ if (isShorts) {
+ iframeWidth = originalWidth;
+ iframeHeight = Math.round(iframeWidth / 9 * 16);
+ }
+ const iframe = document.createElement("iframe");
+ iframe.width = iframeWidth;
+ iframe.height = iframeHeight;
+ iframe.style.border = "none";
+ iframe.allowFullscreen = true;
+ iframe.classList.add(isShorts ? "sg-video-youtube-shorts-iframe" : "");
+ iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+ iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}`;
+ if (videoImage.parentElement.nodeName.toLowerCase() === "picture") {
+ videoImage.parentElement.replaceWith(iframe);
+ } else {
+ videoImage.replaceWith(iframe);
+ }
+ }
+ static disableVimeoLightbox(event) {
+ event.preventDefault();
+ const item = event.currentTarget.closest(".sg-video__item");
+ const link = item.querySelector("a");
+ item.classList.add("no-lightbox");
+ const iframeUrl = SgVideoLightbox.includeAdditionalUrlParameters(
+ link.href,
+ link.dataset.additionalUrlParameters
+ );
+ const thumbnailElement = item.querySelector(".sg-video__image");
+ const width = thumbnailElement == null ? void 0 : thumbnailElement.clientWidth;
+ const height = thumbnailElement == null ? void 0 : thumbnailElement.clientHeight;
+ const nodes = document.createRange().createContextualFragment(
+ `<div class="sg-video-item sg-card-shadow" style="height: ${height}px; width: ${width}px;"><div class="embed-container" style="padding-bottom: calc(${height} / ${width} * 100%);"><iframe width="${width}" height="${height}" src="${iframeUrl}&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div></div>`
+ );
+ thumbnailElement == null ? void 0 : thumbnailElement.replaceWith(nodes);
+ }
+ static getVimeoVideoIdFromUrl(url) {
+ const regExp = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?(\d+)/;
+ const parseUrl = regExp.exec(url);
+ return parseUrl[5];
+ }
+ static getYouTubeVideoIdFromUrl(url) {
+ const matches = url.match(/watch\?v=([^&?]*)(?:&list=([^&?]*))?|shorts\/([^&/?]+)/);
+ if (!matches) {
+ return null;
+ }
+ const videoId = matches[1] || matches[3];
+ const listParameter = matches[2] ? `?list=${matches[2]}` : "";
+ const autoplayParameters = listParameter ? "&autoplay=1&rel=0" : "?autoplay=1&rel=0";
+ return `${videoId}${listParameter}${autoplayParameters}`;
+ }
+ static includeAdditionalUrlParameters(url, _additionalUrlParameters = "") {
+ if (!url) {
+ return "";
+ }
+ if (!_additionalUrlParameters) {
+ return url;
+ }
+ let additionalUrlParameters = _additionalUrlParameters;
+ const beginsWithQuestionMark = additionalUrlParameters.charAt(0) === "?";
+ const beginsWithAmpersand = additionalUrlParameters.charAt(0) === "&";
+ if (beginsWithQuestionMark || beginsWithAmpersand) {
+ additionalUrlParameters = additionalUrlParameters.slice(1);
+ }
+ return url.includes("?") ? `${url}&${additionalUrlParameters}` : `${url}?${additionalUrlParameters}`;
+ }
+ };
+
+ // vendor/sgalinski/sg-youtube/Resources/Public/JavaScript/Modules/sgVideo.js
+ var SgVideo = class {
+ constructor(element, settings) {
+ this.settings = settings;
+ this.dom = {
+ list: element,
+ listItems: element.querySelectorAll(".sg-video__item")
+ };
+ this.active = 0;
+ this.dom.listItems.forEach((item, index) => {
+ this.setupReadMore(index);
+ });
+ if (!this.settings.disableMinHeight) {
+ this.checkImageSizes();
+ }
+ }
+ static initDefault() {
+ document.querySelectorAll(".sg-video__list--default").forEach((item) => {
+ new SgVideo(item, {
+ textSelector: ".sg-video__bodytext",
+ descriptionSelector: ".sg-video__description",
+ type: "default"
+ });
+ });
+ document.querySelectorAll(".sg-video__list--rows").forEach((item) => {
+ new SgVideo(item, {
+ textSelector: ".sg-video__description",
+ descriptionSelector: ".sg-video__description",
+ disableMinHeight: true
+ });
+ });
+ document.querySelectorAll(".sg-video__list--playlist").forEach((item) => {
+ new SgVideo(item, {
+ textSelector: ".sg-video__description",
+ descriptionSelector: ".sg-video__description",
+ disableMinHeight: true
+ });
+ });
+ document.querySelectorAll(".sg-video__highlight").forEach((item) => {
+ new SgVideo(item, {
+ textSelector: ".sg-video__bodytext",
+ descriptionSelector: ".sg-video__description",
+ disableMinHeight: true
+ });
+ });
+ document.querySelectorAll(".sg-video--single").forEach((item) => {
+ new SgVideo(item, {
+ textSelector: ".sg-video__description",
+ descriptionSelector: ".sg-video__description"
+ });
+ });
+ }
+ checkImageSizes() {
+ let highestValue = 0;
+ const images = [];
+ this.dom.listItems.forEach((item) => {
+ const image = item.querySelector("img");
+ if (image && image.height > highestValue) {
+ highestValue = image.height;
+ }
+ images.push(image);
+ });
+ images.forEach((image) => {
+ image.style.minHeight = `${highestValue}px`;
+ });
+ }
+ setupReadMore(index) {
+ const item = this.dom.listItems[index];
+ const button = item.querySelector(".sg-video__read-more");
+ const text = item.querySelector(this.settings.textSelector);
+ if (!text) {
+ if (button) {
+ button.classList.add("disabled");
+ }
+ return;
+ }
+ if (!button) {
+ return;
+ }
+ if (SgVideo.isTextTruncated(text, this.settings)) {
+ button.classList.add("disabled");
+ return;
+ }
+ button.addEventListener("click", () => this.showText(index));
+ }
+ showText(index) {
+ const item = this.dom.listItems[index];
+ if (item.classList.contains("expanded")) {
+ this.active -= 1;
+ this.hideText(index);
+ return;
+ }
+ this.active += 1;
+ const button = item.querySelector(".sg-video__read-more");
+ const text = item.querySelector(this.settings.textSelector);
+ const description = text.matches(this.settings.descriptionSelector) ? text : text.querySelector(this.settings.descriptionSelector);
+ item.classList.add("expanded");
+ text.classList.add("expanded");
+ description.classList.add("expanded");
+ button.classList.add("expanded");
+ button.querySelector(".sg-video__read-more-text").textContent = button.dataset.buttonCloseText;
+ }
+ hideText(index) {
+ const item = this.dom.listItems[index];
+ const button = item.querySelector(".sg-video__read-more");
+ const text = item.querySelector(this.settings.textSelector);
+ const description = text.matches(this.settings.descriptionSelector) ? text : text.querySelector(this.settings.descriptionSelector);
+ text.classList.remove("expanded");
+ description.classList.remove("expanded");
+ button.classList.remove("expanded");
+ button.querySelector(".sg-video__read-more-text").textContent = button.dataset.buttonOpenText;
+ setTimeout(() => {
+ if (this.settings.type === "default" && this.active === 0) {
+ this.dom.listItems.forEach((_item) => {
+ _item.style.height = "";
+ _item.style.zIndex = "";
+ });
+ }
+ item.classList.remove("expanded");
+ }, 200);
+ }
+ static isTextTruncated(element, settings) {
+ const descriptionElement = element.matches(settings.descriptionSelector) ? element : element.querySelector(settings.descriptionSelector);
+ return descriptionElement && descriptionElement.scrollHeight <= descriptionElement.clientHeight;
+ }
+ };
+
+ // vendor/sgalinski/sg-youtube/Resources/Public/JavaScript/main.js
+ function main() {
+ new SgVideoLightbox();
+ SgVideo.initDefault();
+ }
+ if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", main);
+ } else {
+ main();
+ }
+})();
+//# sourceMappingURL=main.bundled.min.js.map
diff --git a/Resources/Public/JavaScript/Modules/sgVideoLightbox.js b/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
index 5b6921c7eb51f90706b4d5b6765b71b7b94b0e9a..644cada73eabfc8fffdf39270b21207014f02343 100644
--- a/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
+++ b/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
@@ -105,7 +105,9 @@ export default class SgVideoLightbox {
event.target.closest('a').dataset.additionalUrlParameters,
);
- const iframeClass = isShorts ? 'sg-video-iframe sg-video-youtube-iframe sg-video-youtube-shorts-iframe' : 'sg-video-iframe sg-video-youtube-iframe';
+ const iframeClass = isShorts
+ ? 'sg-video-iframe sg-video-youtube-iframe sg-video-youtube-shorts-iframe'
+ : 'sg-video-iframe sg-video-youtube-iframe';
const instance = BasicLightbox.create(
`
@@ -155,7 +157,8 @@ export default class SgVideoLightbox {
iframe.style.border = 'none';
iframe.allowFullscreen = true;
iframe.classList.add(isShorts ? 'sg-video-youtube-shorts-iframe' : '');
- iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
+ iframe.allow =
+ 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
iframe.src = `https://www.youtube-nocookie.com/embed/${videoId}`;
if (videoImage.parentElement.nodeName.toLowerCase() === 'picture') {
@@ -190,14 +193,14 @@ export default class SgVideoLightbox {
.createRange()
.createContextualFragment(
`<div class="sg-video-item sg-card-shadow" ` +
- `style="height: ${height}px; width: ${width}px;">` +
- `<div class="embed-container" style="padding-bottom: calc(${height} / ${width} * 100%);">` +
- `<iframe ` +
- `width="${width}" height="${height}" ` +
- `src="${iframeUrl}&dnt=1" frameborder="0" ` +
- `allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>` +
- `</iframe>` +
- `</div></div>`,
+ `style="height: ${height}px; width: ${width}px;">` +
+ `<div class="embed-container" style="padding-bottom: calc(${height} / ${width} * 100%);">` +
+ `<iframe ` +
+ `width="${width}" height="${height}" ` +
+ `src="${iframeUrl}&dnt=1" frameborder="0" ` +
+ `allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>` +
+ `</iframe>` +
+ `</div></div>`,
);
thumbnailElement?.replaceWith(nodes);
}
@@ -222,17 +225,17 @@ export default class SgVideoLightbox {
*/
static getYouTubeVideoIdFromUrl(url) {
// Match standard YouTube URL or Shorts URL
- const matches = url.match(/watch\?v=([^&?]*)(?:&list=([^&?]*))?|shorts\/([^&?/]+)/);
+ const matches = url.match(/watch\?v=([^&?]*)(?:&list=([^&?]*))?|shorts\/([^&/?]+)/);
if (!matches) {
return null;
}
// Determine the video ID and construct the appropriate URL
const videoId = matches[1] || matches[3];
- const listParam = matches[2] ? `?list=${matches[2]}` : '';
- const autoplayParams = listParam ? '&autoplay=1&rel=0' : '?autoplay=1&rel=0';
+ const listParameter = matches[2] ? `?list=${matches[2]}` : '';
+ const autoplayParameters = listParameter ? '&autoplay=1&rel=0' : '?autoplay=1&rel=0';
- return `${videoId}${listParam}${autoplayParams}`;
+ return `${videoId}${listParameter}${autoplayParameters}`;
}
/**
diff --git a/Resources/Public/Sass/Bootstrap5/main.scss b/Resources/Public/Sass/Bootstrap5/main.scss
index 5c5853d64f6f07c09dfa73a7f6adf761f78b87ca..b2c182b64434f67880440d217354e2710a7bd4cf 100644
--- a/Resources/Public/Sass/Bootstrap5/main.scss
+++ b/Resources/Public/Sass/Bootstrap5/main.scss
@@ -1 +1 @@
-@import '../Modules/Bootstrap5/sg-video';
+@use '../Modules/Bootstrap5/sg-video';
diff --git a/Resources/Public/Sass/Modules/_sg-video.scss b/Resources/Public/Sass/Modules/_sg-video.scss
index 25bfaf977287f14f7927bb932617fc7acfc94710..9d4d1e27e9ca11c37ea515b935bb46dfb9e17cce 100644
--- a/Resources/Public/Sass/Modules/_sg-video.scss
+++ b/Resources/Public/Sass/Modules/_sg-video.scss
@@ -14,9 +14,9 @@ $basicLightbox__timing: ease !default;
}
$sg-video-icon-solid-play: "data:image/svg+xml,%3csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath d='M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z'/%3e%3c/svg%3e"
- 448px 512px;
+448px 512px;
$sg-video-icon-solid-chevron-down: "data:image/svg+xml,%3csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3e%3c/svg%3e"
- 448px 512px;
+448px 512px;
$sg-video-item-heading-color: var(--sg-video-component-color-headline);
$sg-video-item-text-color: var(--sg-video-component-color-foreground);
@@ -62,6 +62,14 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
width: 100%;
height: auto;
transition: transform $sg-video-base-transition-timing ease;
+
+ &--shorts {
+ height: auto;
+ aspect-ratio: 9 / 16;
+ object-fit: cover;
+
+ max-height: 900px;
+ }
}
&__image-container {
@@ -80,7 +88,7 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
transform: translate(-50%, -50%) scale(0.8);
opacity: 0.8;
transition: opacity $sg-video-base-transition-timing,
- transform $sg-video-base-transition-timing;
+ transform $sg-video-base-transition-timing;
z-index: 9;
text-shadow: -1px 4px 27px rgba(0, 0, 0, 0.5);
}
@@ -148,6 +156,7 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
&__list {
margin-bottom: 0;
list-style: none;
+ padding-left: 0;
}
&__highlight {
@@ -477,7 +486,7 @@ iframe.sg-video-iframe {
aspect-ratio: 16/9;
}
-.tx-sg-youtube-filters {
+.sg-video-filters {
gap: 10px;
display: flex;
flex-direction: row;
diff --git a/Resources/Public/Sass/main.scss b/Resources/Public/Sass/main.scss
index 95032e111dc234e7168d4de9758a4e18c8b928de..f3d23029d61c16c524986f75efd369e1298f8102 100644
--- a/Resources/Public/Sass/main.scss
+++ b/Resources/Public/Sass/main.scss
@@ -1 +1 @@
-@import 'Modules/sg-video';
+@use 'Modules/sg-video';
diff --git a/Resources/Public/StyleSheets/Bootstrap5/main.min.css b/Resources/Public/StyleSheets/Bootstrap5/main.min.css
index 88d70807fa576e53e63f2b05f241d0763b383f8e..78d34953cb5790d831d52686597b7a2780cd4164 100644
--- a/Resources/Public/StyleSheets/Bootstrap5/main.min.css
+++ b/Resources/Public/StyleSheets/Bootstrap5/main.min.css
@@ -1 +1 @@
-.sg-video__link:hover .sg-video__svg-inner{animation:pulse 1.4s linear infinite}.sg-video__link:hover .sg-video__image{transform:scale(1.1)}.sg-video__read-more-arrow{transform:rotate(180deg)}.sg-video__read-more-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-less-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-text{display:inline-flex}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-arrow{transform:none}.sg-video__image{transition:transform .3s ease}.sg-video__svg svg{transform:translateX(3px)}.no-lightbox .sg-video__svg{display:none !important}.sg-video__svg-inner{opacity:.5;transition:opacity .3s ease,transform .3s ease}.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1020;will-change:opacity}.basicLightbox::after{content:"";position:absolute;top:1.8rem;right:1.8rem;width:2em;height:2em;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C!--!%20Font%20Awesome%20Free%206.5.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202023%20Fonticons%2C%20Inc.%20--%3E%3Cg%20id%3D%22svg-dff5ea2525636251b1cf60f8943ff15f%22%3E%3Cpath%20d%3D%22M342.6%20150.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20210.7%2086.6%20105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L146.7%20256%2041.4%20361.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20301.3%20297.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.3%20256%20342.6%20150.6z%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;cursor:pointer}.basicLightbox--visible{opacity:1;pointer-events:auto}.basicLightbox__placeholder{max-width:100%;transform:scale(0.9);transition:transform .4s ease;z-index:1;will-change:transform;display:flex;align-items:center;justify-content:center}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder,.basicLightbox--iframe .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}iframe.sg-video-iframe,.basicLightbox .sg-cookie-optin-iframe-consent{width:100%;height:auto;max-width:900px;aspect-ratio:16/9}.basicLightbox .sg-cookie-optin-iframe-consent{pointer-events:all}.sg-video-filters{gap:10px;display:flex;flex-direction:row;align-items:baseline}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{opacity:.75}100%{transform:scale(1.1);opacity:1}}
+.sg-video__link:hover .sg-video__svg-inner{animation:pulse 1.4s linear infinite}.sg-video__link:hover .sg-video__image{transform:scale(1.1)}.sg-video__read-more-arrow{transform:rotate(180deg)}.sg-video__read-more-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-less-text{display:none}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-text{display:inline-flex}.collapse:not(.show)+.sg-video__read-more .sg-video__read-more-arrow{transform:none}.sg-video__image{transition:transform .3s ease}.sg-video__image--shorts{height:auto;aspect-ratio:9/16;object-fit:cover;max-height:900px}.sg-video__svg svg{transform:translateX(3px)}.no-lightbox .sg-video__svg{display:none !important}.sg-video__svg-inner{opacity:.5;transition:opacity .3s ease,transform .3s ease}.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1020;will-change:opacity}.basicLightbox::after{content:"";position:absolute;top:1.8rem;right:1.8rem;width:2em;height:2em;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C!--!%20Font%20Awesome%20Free%206.5.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20(Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License)%20Copyright%202023%20Fonticons%2C%20Inc.%20--%3E%3Cg%20id%3D%22svg-dff5ea2525636251b1cf60f8943ff15f%22%3E%3Cpath%20d%3D%22M342.6%20150.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20210.7%2086.6%20105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L146.7%20256%2041.4%20361.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192%20301.3%20297.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.3%20256%20342.6%20150.6z%22%20fill%3D%22white%22%20stroke%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:no-repeat;cursor:pointer}.basicLightbox--visible{opacity:1;pointer-events:auto}.basicLightbox__placeholder{max-width:100%;transform:scale(0.9);transition:transform .4s ease;z-index:1;will-change:transform;display:flex;align-items:center;justify-content:center}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder,.basicLightbox--iframe .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}iframe.sg-video-iframe,.basicLightbox .sg-cookie-optin-iframe-consent{width:100%;height:auto;max-width:900px;aspect-ratio:16/9}iframe.sg-video-youtube-shorts-iframe{aspect-ratio:9/16}iframe.sg-video-youtube-shorts-iframe.sg-video-iframe{width:90vw;max-width:480px;height:auto;max-height:900px;margin:0 auto}.basicLightbox .sg-cookie-optin-iframe-consent{pointer-events:all}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{opacity:.75}100%{transform:scale(1.1);opacity:1}}
diff --git a/Resources/Public/StyleSheets/main.min.css b/Resources/Public/StyleSheets/main.min.css
index 44132219f77d316ef9c7608e3c2c1918f5d0dd3d..a909adc2aa834b27a4c181cf53c5df9f275301d0 100644
--- a/Resources/Public/StyleSheets/main.min.css
+++ b/Resources/Public/StyleSheets/main.min.css
@@ -1 +1 @@
-:root{--sg-video-component-color-headline: #0a293b;--sg-video-component-color-foreground: #174566;--sg-video-component-color-background: none;--sg-video-component-color-link: #15415e;--sg-video-component-color-play-button: #fff;--sg-video-component-color-link--hover: #061924}.tx-sg-youtube{margin-bottom:20px}.tx-sg-youtube iframe{border:0}.tx-sg-vimeo{margin-bottom:20px}.tx-sg-vimeo iframe{border:0}.sg-video__image{width:100%;height:auto;transition:transform var(--sg-video-base-transition-timing, 0.3s) ease}.sg-video__image-container{position:relative;overflow:hidden;width:100%;color:var(--sg-video-component-color-play-button);display:block}.sg-video__image-container:not(.no-lightbox) svg{position:absolute;top:50%;left:50%;width:40px;height:50px;transform:translate(-50%, -50%) scale(0.8);opacity:.8;transition:opacity var(--sg-video-base-transition-timing, 0.3s),transform var(--sg-video-base-transition-timing, 0.3s);z-index:9;text-shadow:-1px 4px 27px rgba(0,0,0,.5)}.sg-video__image-container:hover,.sg-video__image-container:focus{text-decoration:none}.sg-video__image-container:hover .sg-video__image,.sg-video__image-container:focus .sg-video__image{transform:scale(1.1)}.sg-video__image-container:hover::after,.sg-video__image-container:focus::after{transform:translate(-50%, -50%) scale(1.1)}.sg-video__read-more{padding:10px 0;display:inline-block;cursor:pointer;width:100%;text-align:left;margin-top:auto;text-decoration:none;font-weight:700;text-transform:lowercase}.sg-video__bodytext{padding:10px 0;margin-top:auto;margin-bottom:auto;min-height:90px}@media(1200px){.sg-video__bodytext{padding:20px}}.sg-video__bodytext h3{color:var(--sg-video-component-color-headline);margin-top:0;padding-top:0}.sg-video__bodytext .sg-video__description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.sg-video__bodytext .sg-video__description.expanded{-webkit-line-clamp:unset}.sg-video__item{box-shadow:0 0 7px rgba(var(--sg-video-box-shadow-rgb), 0.18);background:var(--sg-video-component-color-background)}.sg-video__list{margin-bottom:0;list-style:none}.sg-video__highlight .sg-video__item{display:flex;flex-direction:column}.sg-video__highlight .sg-video__image{object-fit:scale-down}@media(min-width: 1200px){.sg-video__list-item--alt .sg-video__item{display:flex}.sg-video__list-item--alt .sg-video__image-container{width:50%}.sg-video__list-item--alt .sg-video__bodytext{width:50%;background:rgba(0,0,0,0);padding:0 5px 0 20px}}@media(min-width: 1200px){.sg-video--playlist{display:grid;gap:20px;grid-template-columns:70% auto;position:relative}}.sg-video__list--playlist{display:flex;flex-direction:row;position:relative}@media(min-width: 1200px){.sg-video__list--playlist>div{position:absolute;height:100%;width:100%;overflow-y:auto;flex-direction:column;flex-grow:1;justify-content:space-between}.sg-video__list--playlist>div .sg-video__list-item:not(:last-child){margin-bottom:15px}}.sg-video__list--playlist .sg-video__item{height:100%}.sg-video__list--playlist .sg-video__bodytext{padding:10px 0 0}.sg-video__list--playlist h3{font-size:1.3em}.sg-video__list-item{position:relative;margin:15px 10px}@media(min-width: 1200px){.sg-video__list-item{margin:auto}}@media(min-width: 1200px){.sg-video__list-item--alt{margin:0}}@media(max-width: 767.98px){.sg-video .sg-video__list--playlist{display:block}}.sg-video__list--default{display:flex;flex-wrap:wrap;margin:0 -10px}.sg-video__list--default>li{width:100%;margin:10px;display:flex;flex-direction:column}@media(min-width: 1200px){.sg-video__list--default>li{width:calc(33.3333% - 20px)}}.sg-video__list--default a{box-shadow:none}.sg-video__list--default .sg-video__bodytext{position:relative;display:block;overflow:hidden;padding:10px 0;transition:max-height var(--sg-video-base-transition-timing-fast, 0.1s)}.sg-video__list--default .sg-video__read-more{display:block;width:100%;text-align:left;margin-top:auto}.sg-video__list--default .sg-video__item{flex-grow:1}@media(max-width: var(--sg-video-mobile-breakpoint, 768px)-1px){.sg-video__list--default img{min-height:0 !important}}.sg-video__read-more{background:none;color:var(--sg-video-component-color-link);border:0}.sg-video__read-more:hover{color:var(--sg-video-component-color-link--hover)}.sg-video__read-more svg{display:inline-block;width:13px;height:10px;transition:transform var(--sg-video-base-transition-timing, 0.3s)}.sg-video__read-more.disabled{display:none}.sg-video__list--rows .sg-video__read-more.disabled{display:none !important}.sg-video__list--rows .sg-video__image{object-fit:contain}@media(min-width: 992px){.sg-video__list--rows .sg-video__item{box-shadow:none;background-color:rgba(0,0,0,0);display:flex}.sg-video__list--rows .sg-video__image-container{float:left;clear:left;width:40.5%}.sg-video__list--rows .sg-video__image-container span{position:relative}}@media(min-width: 992px)and (min-width: 1200px){.sg-video__list--rows .sg-video__image-container{width:35%}}@media(min-width: 992px){.sg-video__list--rows .sg-video__bodytext{position:relative;box-shadow:0 0 7px rgba(var(--sg-video-box-shadow-rgb), 0.18);margin-left:auto;display:block;min-height:210px}}@media(min-width: 992px)and (min-width: 1200px){.sg-video__list--rows .sg-video__bodytext{width:65%;min-height:225px;padding-top:0;padding-left:20px}}@media(min-width: 992px){.sg-video__list--rows .sg-video__description{-webkit-line-clamp:5;transition:max-height var(--sg-video-base-transition-timing-fast, 0.1s)}.sg-video__list--rows .sg-video__list-item{margin-bottom:25px}.sg-video__list--rows .sg-video__read-more{display:block;padding:20px 0 0}}.sg-video__read-more.expanded .sg-video__read-more-arrow{transform:rotateX(180deg)}.sg-video-lightbox-wrapper{pointer-events:all;padding:0;margin:0}.no-lightbox svg{display:none}.plyr .sg-cookie-optin-iframe-consent{min-height:410px}.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1000;will-change:opacity}.basicLightbox ::after{content:"";position:absolute;top:1.8rem;right:1.8rem;width:2em;height:2em;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg width='90px' height='90px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3EClose-Circle%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Close-Circle'%3E%3Crect id='Rectangle' fill-rule='nonzero' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Ccircle id='Oval' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cline x1='14.1213' y1='9.87866' x2='9.8787' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3Cline x1='9.87866' y1='9.87866' x2='14.1213' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer}.basicLightbox--visible{opacity:1;pointer-events:auto}.basicLightbox__placeholder{max-width:100%;transform:scale(0.9);transition:transform .4s ease;z-index:1;will-change:transform}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder,.basicLightbox--iframe .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}iframe.sg-video-iframe{width:100%;height:auto;max-width:900px;aspect-ratio:16/9}.tx-sg-youtube-filters{gap:10px;display:flex;flex-direction:row;align-items:baseline}
+:root{--sg-video-component-color-headline: #0a293b;--sg-video-component-color-foreground: #174566;--sg-video-component-color-background: none;--sg-video-component-color-link: #15415e;--sg-video-component-color-play-button: #fff;--sg-video-component-color-link--hover: #061924}.tx-sg-youtube{margin-bottom:20px}.tx-sg-youtube iframe{border:0}.tx-sg-vimeo{margin-bottom:20px}.tx-sg-vimeo iframe{border:0}.sg-video__image{width:100%;height:auto;transition:transform var(--sg-video-base-transition-timing, 0.3s) ease}.sg-video__image--shorts{height:auto;aspect-ratio:9/16;object-fit:cover;max-height:900px}.sg-video__image-container{position:relative;overflow:hidden;width:100%;color:var(--sg-video-component-color-play-button);display:block}.sg-video__image-container:not(.no-lightbox) svg{position:absolute;top:50%;left:50%;width:40px;height:50px;transform:translate(-50%, -50%) scale(0.8);opacity:.8;transition:opacity var(--sg-video-base-transition-timing, 0.3s),transform var(--sg-video-base-transition-timing, 0.3s);z-index:9;text-shadow:-1px 4px 27px rgba(0,0,0,.5)}.sg-video__image-container:hover,.sg-video__image-container:focus{text-decoration:none}.sg-video__image-container:hover .sg-video__image,.sg-video__image-container:focus .sg-video__image{transform:scale(1.1)}.sg-video__image-container:hover::after,.sg-video__image-container:focus::after{transform:translate(-50%, -50%) scale(1.1)}.sg-video__read-more{padding:10px 0;display:inline-block;cursor:pointer;width:100%;text-align:left;margin-top:auto;text-decoration:none;font-weight:700;text-transform:lowercase}.sg-video__bodytext{padding:10px 0;margin-top:auto;margin-bottom:auto;min-height:90px}@media(1200px){.sg-video__bodytext{padding:20px}}.sg-video__bodytext h3{color:var(--sg-video-component-color-headline);margin-top:0;padding-top:0}.sg-video__bodytext .sg-video__description{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.sg-video__bodytext .sg-video__description.expanded{-webkit-line-clamp:unset}.sg-video__item{box-shadow:0 0 7px rgba(var(--sg-video-box-shadow-rgb), 0.18);background:var(--sg-video-component-color-background)}.sg-video__list{margin-bottom:0;list-style:none;padding-left:0}.sg-video__highlight .sg-video__item{display:flex;flex-direction:column}.sg-video__highlight .sg-video__image{object-fit:scale-down}@media(min-width: 1200px){.sg-video__list-item--alt .sg-video__item{display:flex}.sg-video__list-item--alt .sg-video__image-container{width:50%}.sg-video__list-item--alt .sg-video__bodytext{width:50%;background:rgba(0,0,0,0);padding:0 5px 0 20px}}@media(min-width: 1200px){.sg-video--playlist{display:grid;gap:20px;grid-template-columns:70% auto;position:relative}}.sg-video__list--playlist{display:flex;flex-direction:row;position:relative}@media(min-width: 1200px){.sg-video__list--playlist>div{position:absolute;height:100%;width:100%;overflow-y:auto;flex-direction:column;flex-grow:1;justify-content:space-between}.sg-video__list--playlist>div .sg-video__list-item:not(:last-child){margin-bottom:15px}}.sg-video__list--playlist .sg-video__item{height:100%}.sg-video__list--playlist .sg-video__bodytext{padding:10px 0 0}.sg-video__list--playlist h3{font-size:1.3em}.sg-video__list-item{position:relative;margin:15px 10px}@media(min-width: 1200px){.sg-video__list-item{margin:auto}}@media(min-width: 1200px){.sg-video__list-item--alt{margin:0}}@media(max-width: 767.98px){.sg-video .sg-video__list--playlist{display:block}}.sg-video__list--default{display:flex;flex-wrap:wrap;margin:0 -10px}.sg-video__list--default>li{width:100%;margin:10px;display:flex;flex-direction:column}@media(min-width: 1200px){.sg-video__list--default>li{width:calc(33.3333% - 20px)}}.sg-video__list--default a{box-shadow:none}.sg-video__list--default .sg-video__bodytext{position:relative;display:block;overflow:hidden;padding:10px 0;transition:max-height var(--sg-video-base-transition-timing-fast, 0.1s)}.sg-video__list--default .sg-video__read-more{display:block;width:100%;text-align:left;margin-top:auto}.sg-video__list--default .sg-video__item{flex-grow:1}@media(max-width: var(--sg-video-mobile-breakpoint, 768px)-1px){.sg-video__list--default img{min-height:0 !important}}.sg-video__read-more{background:none;color:var(--sg-video-component-color-link);border:0}.sg-video__read-more:hover{color:var(--sg-video-component-color-link--hover)}.sg-video__read-more svg{display:inline-block;width:13px;height:10px;transition:transform var(--sg-video-base-transition-timing, 0.3s)}.sg-video__read-more.disabled{display:none}.sg-video__list--rows .sg-video__read-more.disabled{display:none !important}.sg-video__list--rows .sg-video__image{object-fit:contain}@media(min-width: 992px){.sg-video__list--rows .sg-video__item{box-shadow:none;background-color:rgba(0,0,0,0);display:flex}.sg-video__list--rows .sg-video__image-container{float:left;clear:left;width:40.5%}.sg-video__list--rows .sg-video__image-container span{position:relative}}@media(min-width: 992px)and (min-width: 1200px){.sg-video__list--rows .sg-video__image-container{width:35%}}@media(min-width: 992px){.sg-video__list--rows .sg-video__bodytext{position:relative;box-shadow:0 0 7px rgba(var(--sg-video-box-shadow-rgb), 0.18);margin-left:auto;display:block;min-height:210px}}@media(min-width: 992px)and (min-width: 1200px){.sg-video__list--rows .sg-video__bodytext{width:65%;min-height:225px;padding-top:0;padding-left:20px}}@media(min-width: 992px){.sg-video__list--rows .sg-video__description{-webkit-line-clamp:5;transition:max-height var(--sg-video-base-transition-timing-fast, 0.1s)}.sg-video__list--rows .sg-video__list-item{margin-bottom:25px}.sg-video__list--rows .sg-video__read-more{display:block;padding:20px 0 0}}.sg-video__read-more.expanded .sg-video__read-more-arrow{transform:rotateX(180deg)}.sg-video-lightbox-wrapper{pointer-events:all;padding:0;margin:0}.no-lightbox svg{display:none}.plyr .sg-cookie-optin-iframe-consent{min-height:410px}.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1000;will-change:opacity}.basicLightbox ::after{content:"";position:absolute;top:1.8rem;right:1.8rem;width:2em;height:2em;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg width='90px' height='90px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23ffffff' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3EClose-Circle%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Close-Circle'%3E%3Crect id='Rectangle' fill-rule='nonzero' x='0' y='0' width='24' height='24'%3E%3C/rect%3E%3Ccircle id='Oval' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cline x1='14.1213' y1='9.87866' x2='9.8787' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3Cline x1='9.87866' y1='9.87866' x2='14.1213' y2='14.1213' id='Path' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer}.basicLightbox--visible{opacity:1;pointer-events:auto}.basicLightbox__placeholder{max-width:100%;transform:scale(0.9);transition:transform .4s ease;z-index:1;will-change:transform}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.basicLightbox__placeholder>video:first-child:last-child,.basicLightbox__placeholder>iframe:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder,.basicLightbox--iframe .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}iframe.sg-video-iframe{width:100%;height:auto;max-width:900px;aspect-ratio:16/9}.sg-video-filters{gap:10px;display:flex;flex-direction:row;align-items:baseline}