Video Thumbnail Styling

Apologies, I am removing the related videos from YouTube but it seems they are still showing on mobile.

[video_lightbox_youtube video_id=”9xwazD5SyVg&rel=0” width=”640″ height=”480″ alt=”Interior”]

• This reply was modified 1 year, 6 months ago by gharchi.

Thanks for your quick reply. I am trying to figure out. I disabled all plugins and themes, and used “Twenty Twenty-Four” theme.

The Shorcode below works well on Desktop but on mobile devices not. The related videos are still showing.
[video_lightbox_youtube video_id=”9xwazD5SyVg&rel=0″ width=”640″ height=”480″ anchor=”click me”]

I checked inspect element, I can see the value of “rel” sets to 0 on Desktop inside the iframe but on mobile devices it changes to 1.

Desktop:
https://www.youtube.com/embed/9xwazD5SyVg?rel=0

Mobile:
https://www.youtube.com/embed/9xwazD5SyVg?rel=1

Kind curious to know.

The problem is resolved. I wrote a custom JS function to get the iframe and force the rel=0 in mobile devices.
I am not sure what was the problem, we tested it in a plain WP setup and only one plugin but still the issue was there. Anyways, it works now as we have the function to force it. Thanks

Here is a function you can use in functions.php. The function grabs a link and listens for link clicks. I added a 900ms delay (adjustable based on your theme) to ensure the iframe is fully loaded. Once the iframe is loaded, the function removes any related and autoplay parameters from the iframe and re-adds them.

document.addEventListener('DOMContentLoaded', function () {
	const videoLinks = document.querySelectorAll('a[rel="wp-video-lightbox"]');
	videoLinks.forEach((link) => {
		link.addEventListener('click', function () {
			setTimeout(() => {
				let iframe = document.querySelector('iframe[src*="youtube.com/embed"]');

				if (iframe) {
					// Get the current src and remove any existing 'rel' and 'autoplay' parameters
					let src = iframe.getAttribute('src');

					// Clean the src by removing existing 'rel' or 'autoplay' parameters
					src = src.replace(/[?&](rel=\d|autoplay=\d)/g, '');

					// Add rel=0 to disable related videos and autoplay=1 to start the video
					src += (src.includes('?') ? '&rel=0&autoplay=1' : '?rel=0&autoplay=1');
					iframe.setAttribute('src', src);

					// Set iframe width for responsive behavior
					//iframe.style.width = '100%';
					//iframe.style.maxWidth = '100%';
				} 
			}, 900);
		});
	});
});

I also encountered an issue with video thumbnails being cropped on smaller devices, which I resolved by adding aspect-ratio: 16/9; and height: auto; to the iframe in CSS.

Hope it helps someone.

• This reply was modified 1 year, 6 months ago by gharchi.