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 month, 1 week ago by gharchi.

Thank you for reaching out to us.

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

I am wondering if this might be associated with your theme or a cache plugin issue?

Regards.

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.

Can you share the URL with the YouTube video so that I can check on my mobile phone.

Thank you.

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

That is great news, well done. Do you mind sharing the custom function. This could help other sunning into the same issue as yourself.

Kind regards.

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 month, 1 week ago by gharchi.

Thank you so much for sharing this superb information. I am sure this is going to help others running into the same problem as yourself. Enjoy the plugin ??

Kind regards.