diff --git a/Resources/Public/JavaScript/Modules/sgVideoLightbox.js b/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
index 3a531e64c8226b76b5c4e0786d7de99f2cb9b205..ab00a6d3f9991778ce9d08d2b6bdc456cbd77c43 100644
--- a/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
+++ b/Resources/Public/JavaScript/Modules/sgVideoLightbox.js
@@ -30,9 +30,10 @@ export default class SgVideoLightbox {
*/
static openLightbox(event) {
event.preventDefault();
+ const isShorts = event.target.closest('a')?.dataset?.isShorts === '1';
switch (event.target.closest('a')?.dataset?.videoType) {
case 'youtube': {
- SgVideoLightbox.openYouTubeLightBox(event);
+ SgVideoLightbox.openYouTubeLightBox(event, isShorts);
break;
}
case 'vimeo': {
@@ -51,9 +52,10 @@ export default class SgVideoLightbox {
*/
static disableLightbox(event) {
event.preventDefault();
+ const isShorts = event.target.closest('a')?.dataset?.isShorts === '1';
switch (event.target.closest('a')?.dataset?.videoType) {
case 'youtube': {
- SgVideoLightbox.disableYouTubeLightbox(event);
+ SgVideoLightbox.disableYouTubeLightbox(event, isShorts);
break;
}
case 'vimeo': {
@@ -91,9 +93,10 @@ export default class SgVideoLightbox {
/**
* Opens the lightbox with the youtube player (uses youtube-nocookie)
*
- * @param event
+ * @param {Event} event
+ * @param {boolean} isShorts
*/
- static openYouTubeLightBox(event) {
+ 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}`;
@@ -102,25 +105,28 @@ 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 instance = BasicLightbox.create(
`
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
- class="sg-video-iframe sg-video-youtube-iframe" src="${url}"></iframe>
+ class="${iframeClass}" src="${url}"></iframe>
`,
{
closable: true,
},
);
-
instance.show();
}
/**
* Replace the image with an iframe
*
- * @param event
+ * @param {Event} event
+ * @param {boolean} isShorts
+ *
*/
- static disableYouTubeLightbox(event) {
+ static disableYouTubeLightbox(event, isShorts) {
event.preventDefault();
const item = event.currentTarget;
item.classList.add('no-lightbox');
@@ -130,16 +136,25 @@ export default class SgVideoLightbox {
item.dataset.additionalUrlParameters,
);
const videoImage = item.querySelector('.sg-video__image');
- const height = videoImage.offsetHeight;
- const width = videoImage.offsetWidth;
+ const originalWidth = videoImage.offsetWidth;
+ const originalHeight = videoImage.offsetHeight;
+
+ // Calculate iframe dimensions
+ let iframeWidth = originalWidth;
+ let iframeHeight = originalHeight;
+ if (isShorts) {
+ // Maintain 9:16 aspect ratio for Shorts
+ iframeWidth = originalWidth;
+ iframeHeight = Math.round((iframeWidth / 9) * 16);
+ }
const iframe = document.createElement('iframe');
- iframe.width = width;
- iframe.height = height;
+ iframe.width = iframeWidth;
+ iframe.height = iframeHeight;
iframe.style.border = 'none';
iframe.allowFullscreen = true;
- iframe.allow =
- 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
+ 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') {
@@ -205,22 +220,18 @@ export default class SgVideoLightbox {
* @return {string|null}
*/
static getYouTubeVideoIdFromUrl(url) {
- let matches = url.match(/watch\?v=(.*)&list=(.*)/);
+ // Match standard YouTube URL or Shorts URL
+ const matches = url.match(/watch\?v=([^&?]*)(?:&list=([^&?]*))?|shorts\/([^&?/]+)/);
if (!matches) {
- // check if the list parameter is missing
- matches = url.match(/watch\?v=([^&?]*)/);
- if (!matches) {
- return null;
- }
- }
- let [, videoString] = matches;
- let queryParameterSeparator = '?';
- if (matches[2]) {
- videoString += `?list=${matches[2]}`;
- queryParameterSeparator = '&';
+ return null;
}
- return `${videoString + queryParameterSeparator}autoplay=1&rel=0`;
+ // 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';
+
+ return `${videoId}${listParam}${autoplayParams}`;
}
/**
diff --git a/Resources/Public/Sass/Modules/Bootstrap5/_sg-video.scss b/Resources/Public/Sass/Modules/Bootstrap5/_sg-video.scss
index db061a007bf0503c9f6d1c0ebe5463a82da1a7cf..a8c585279779c215cfe691558ee61a0c5ac9df80 100644
--- a/Resources/Public/Sass/Modules/Bootstrap5/_sg-video.scss
+++ b/Resources/Public/Sass/Modules/Bootstrap5/_sg-video.scss
@@ -40,6 +40,14 @@ $basicLightbox__timing: ease !default;
.sg-video__image {
transition: transform 0.3s ease;
+
+ &--shorts {
+ height: auto;
+ aspect-ratio: 9 / 16;
+ object-fit: cover;
+
+ max-height: 900px;
+ }
}
.sg-video__svg {
@@ -150,6 +158,18 @@ iframe.sg-video-iframe,
pointer-events: all;
}
+iframe.sg-video-youtube-shorts-iframe {
+ aspect-ratio: 9 / 16;
+
+ &.sg-video-iframe {
+ width: 90vw;
+ max-width: 480px;
+ height: auto;
+ max-height: 900px;
+ margin: 0 auto;
+ }
+}
+
@keyframes pulse {
0% {
transform: scale(1);
diff --git a/Resources/Public/StyleSheets/Bootstrap5/main.min.css b/Resources/Public/StyleSheets/Bootstrap5/main.min.css
index 532e8e4071afeec40bc3d7e19049d116a6d5c800..ebed966161617550542f84b5f1dd621f023db546 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}@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}.basicLightbox .sg-cookie-optin-iframe-consent{pointer-events:all}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}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{opacity:.75}100%{transform:scale(1.1);opacity:1}}