youtubeLightbox.js

/**
 * JavaScript module for the sg-youtube plugin
 *
 */
module.exports = function() {
	'use strict';

	const $ = require('jquery');
	require('magnific-popup');

	/**
	 * Initialize the whole Popup setup
	 */
	function init(section) {
		$(`${section || ''} .sg-youtube-item`).each(function (index, item) {
			let $youtubeItem = $(item),
				viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
			if (($youtubeItem.data('disable-lightbox') && viewportWidth >= 680) ||
				($youtubeItem.data('disable-lightbox-mobile') && viewportWidth < 680)
			) {
				$youtubeItem.on('click', replaceThumbnailWithVideo);
			} else {
				$youtubeItem.magnificPopup({
					type: 'iframe',
					iframe: {
						patterns: {
							youtube: {
								index: 'youtube.com/',
								id: function(url) {
									return prepareVideoUrl(url);
								},
								src: '//www.youtube-nocookie.com/embed/%id%'
							}
						}
					}
				});
			}
		});
	}

	/**
	 * Replaces the given element behind the event with a youtube video.
	 *
	 * @param {Event} event
	 */
	function replaceThumbnailWithVideo(event) {
		event.preventDefault();
		let $youtubeItem = $(event.currentTarget);

		// This needs to be done, because the height of inline elements is always 0, if on auto...
		$youtubeItem.css('display', 'block');

		let queryString = prepareVideoUrl($youtubeItem.attr('href')),
			$thumbnailElement = $youtubeItem.find('.sg-youtube-image'),
			width = $thumbnailElement.outerWidth() + 'px',
			height = $thumbnailElement.outerHeight() + 'px';
		$thumbnailElement.replaceWith('<div class="sg-youtube-item sg-card-shadow" ' +
			'style="height: ' + height + '; width: ' + width + ';"><iframe ' +
			'width="' + width + '" height="' + height + '" ' +
			'src="https://www.youtube-nocookie.com/embed/' + queryString + '" frameborder="0" ' +
			'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ' +
			'allowfullscreen></iframe></div>');
	}

	/**
	 * Prepares the given url, or returns null.
	 *
	 * @param {string} url
	 * @return {string|null}
	 */
	function prepareVideoUrl(url) {
		let matches = url.match(/watch\?v=(.*)&list=(.*)/);
		if (!matches) {
			// check if the list parameter is missing
			matches = url.match(/watch\?v=([^?&]*)/);
			if (!matches) {
				return null;
			}
		}
		let [, videoString] = matches,
			queryParameterSeparator = '?';
		if (matches[2]) {
			videoString += '?list=' + matches[2];
			queryParameterSeparator = '&';

		}

		return videoString + queryParameterSeparator + 'autoplay=1&rel=0';
	}

	init();
};