Skip to content
Snippets Groups Projects
Commit 248554a6 authored by Georgi's avatar Georgi
Browse files

[BUGFIX] Fix shorts CSS

parent b115e6f4
No related branches found
Tags 8.1.1
1 merge request!15[TASK] move flexform field down, add max-height for shorts videos, add backend...
Hide whitespace changes
Inline Side-by-side
README.md
+ 3
− 2
View file @ 248554a6
......@@ -248,9 +248,10 @@ $services->set(AfterMapCustomThumbnailsEventListener::class)
2. Add a new content element and select the YouTube plugin from the list.
3. Provide the necessary YouTube details in the plugin settings (like YouTube API key, video/channel/playlist ID, max results, etc.).
### **Step 2: Disable caching for the extension**
### **Step 2: Disable caching for the extension and Cache validation for your web page**
1. In the TYPO3 backend, go to Settings -> Extensions and open the sg_youtube settings. Tick the box that says 'uncached' and save.
2. This way the the extension will not cache the results and the the data will be loaded dynamically based on the filter settings
2. This way the the extension will not cache the results and the the data will be loaded dynamically based on the filter settings.
3. Set `$GLOBALS['TYPO3_CONF_VARS']['FE']['cacheHash']['enforceValidation'] = false` in your TYPO3 configuration, otherwise using the frontend filters may result in a 404 page in some instances.
### **Step 3: Configuring Filters via FlexForm**
1. In the plugin's FlexForm settings, you will see a section for "Filters."
......
Resources/Public/Sass/Modules/Bootstrap5/_sg-video.scss
+ 7
− 6
View file @ 248554a6
......@@ -4,6 +4,8 @@ $basicLightbox__zIndex: 1020 !default;
$basicLightbox__duration: 0.4s !default;
$basicLightbox__timing: ease !default;
$sg-video-height: calc(100vh - var(--sg-video-ui-height, 10vh));
.sg-video__link {
&:hover {
.sg-video__svg-inner {
......@@ -42,11 +44,11 @@ $basicLightbox__timing: ease !default;
transition: transform 0.3s ease;
&--shorts {
height: auto;
height: $sg-video-height;
aspect-ratio: 9 / 16;
object-fit: cover;
max-height: 900px;
width: auto;
}
}
......@@ -156,12 +158,11 @@ iframe.sg-video-iframe,
iframe.sg-video-youtube-shorts-iframe {
aspect-ratio: 9 / 16;
max-height: $sg-video-height;
&.sg-video-iframe {
width: 90vw;
max-width: 480px;
height: auto;
max-height: 900px;
height: $sg-video-height;
width: auto;
margin: 0 auto;
}
}
......
Resources/Public/Sass/Modules/_sg-video.scss
+ 10
− 11
View file @ 248554a6
......@@ -40,6 +40,7 @@ $sg-video-screen-sm-min: $sg-video-screen-sm;
$sg-video-screen-md-min: $sg-video-screen-md;
$sg-video-screen-lg-min: $sg-video-screen-lg;
$sg-video-screen-xs-min: $sg-video-screen-xs;
$sg-video-height: calc(100vh - var(--sg-video-ui-height, 10vh));
.tx-sg-youtube {
margin-bottom: 20px;
......@@ -47,6 +48,8 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
iframe {
border: 0;
}
}
.tx-sg-vimeo {
......@@ -64,11 +67,11 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
transition: transform $sg-video-base-transition-timing ease;
&--shorts {
height: auto;
width: auto;
aspect-ratio: 9 / 16;
object-fit: cover;
max-height: 900px;
height: $sg-video-height;
max-height: $sg-video-height;
}
}
......@@ -478,22 +481,18 @@ $sg-video-screen-xs-min: $sg-video-screen-xs;
transform: scale(1);
}
}
iframe.sg-video-iframe {
width: 100%;
height: auto;
max-width: 900px;
max-height: $sg-video-height;
width: auto;
aspect-ratio: 16/9;
}
iframe.sg-video-youtube-shorts-iframe {
aspect-ratio: 9 / 16;
max-height: $sg-video-height;
&.sg-video-iframe {
width: 90vw;
max-width: 480px;
height: auto;
max-height: 900px;
height: $sg-video-height;
margin: 0 auto;
}
}
......
Resources/Public/StyleSheets/Bootstrap5/main.min.css
+ 1
− 1
View file @ 248554a6
.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}}
.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:calc(100vh - var(--sg-video-ui-height, 10vh));aspect-ratio:9/16;object-fit:cover;width:auto}.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;max-height:calc(100vh - var(--sg-video-ui-height, 10vh))}iframe.sg-video-youtube-shorts-iframe.sg-video-iframe{height:calc(100vh - var(--sg-video-ui-height, 10vh));width:auto;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}}
Resources/Public/StyleSheets/main.min.css
+ 1
− 1
View file @ 248554a6
: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}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}.sg-video-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{width:auto;aspect-ratio:9/16;object-fit:cover;height:calc(100vh - var(--sg-video-ui-height, 10vh));max-height:calc(100vh - var(--sg-video-ui-height, 10vh))}.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{max-height:calc(100vh - var(--sg-video-ui-height, 10vh));width:auto;aspect-ratio:16/9}iframe.sg-video-youtube-shorts-iframe{aspect-ratio:9/16;max-height:calc(100vh - var(--sg-video-ui-height, 10vh))}iframe.sg-video-youtube-shorts-iframe.sg-video-iframe{height:calc(100vh - var(--sg-video-ui-height, 10vh));margin:0 auto}.sg-video-filters{gap:10px;display:flex;flex-direction:row;align-items:baseline}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment