sgVimeoLightbox.js

import LightboxManager from 'lightboxManager';

export default class SgVimeoLightbox {
	/**
	 * Initializes the LightboxManager with the necessary parameters.
	 */
	constructor() {
		const vimeoItems = document.querySelectorAll('.sg-vimeo-item');
		const isMobile = window.matchMedia('(max-width: 679px)').matches;

		vimeoItems.forEach((item) => {
			if (
				(item.dataset.disableLightboxMobile === '1' && isMobile) ||
				(item.dataset.disableLightbox === '1' && !isMobile)
			) {
				item.classList.remove('sg-vimeo-item');
				item.addEventListener('click', this.disableLightbox.bind(this));
			}
		});

		LightboxManager.init({
			type: 'video',
			glightbox: {
				selector: '.sg-vimeo-item',
				plyr: {
					config: {
						// override 16:9 default ratio, so that plyr automatically detects the video dimensions
						// without this, vertical videos will have black bars around them,
						// see also: https://github.com/biati-digital/glightbox/issues/196#issuecomment-817070671
						ratio: '',
					}
				}
			}
		});
	}

	disableLightbox(event) {
		event.preventDefault();
		const item = event.currentTarget;
		item.classList.add('no-lightbox');

		const videoId = this.getVideoIdFromUrl(item.href);
		const videoImage = item.querySelector('.sg-video__image');
		const height = videoImage.offsetHeight;
		const width = videoImage.offsetWidth;

		const iframe = document.createElement('iframe');
		iframe.width = width;
		iframe.height = height;
		iframe.style.border = 'none';
		iframe.src = `https://player.vimeo.com/video/${videoId}?dnt=1&autoplay=1`;
		iframe.allowFullscreen = true;

		item.replaceChild(iframe, videoImage);
	}

	getVideoIdFromUrl(url) {
		const splitUrl = url.split('/');
		return splitUrl[splitUrl.length - 1];
	}
}