Video Handling - Unknown Extension Types

[sayontan]

I am enjoying using your lightbox script.

I have one observation regarding video behaviour. You currently allow the user to specify a data-vbtype attribute to indicate that something is a video. However, in your code, you are again explicitly checking for a file extension in this line:

if (dest.search(/.+\.mp4|og[gv]|webm/) !== -1) {

The problem is, if I try to show a video stored on Google Photos or in Flickr, those URLs don't align to your format, and often don't have any extension. That makes it problematic, as the code is skipped.

But, if the user is already specifying that something is a video, should you be checking for the extension at all?

You could consider reversing your current code in the loadVid function this way:

		let videoObj = parseVideo(dest);

		if (videoObj.type) {
			let player;

			// set rel=0 to hide related videos at the end of YT + optional autoplay
			stringAutoplay = autoplay ? "?rel=0&autoplay=1" : "?rel=0";
			let queryvars = stringAutoplay + getUrlParameter(dest);

			if (videoObj.type == 'vimeo') {
				player = 'https://player.vimeo.com/video/';
			} else if (videoObj.type == 'youtube') {
				player = 'https://www.youtube.com/embed/';
			}
			newcontent = '<div class="venoratio venoratio-' + ratio + '"><iframe webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay" frameborder="0" src="'+player+videoObj.id+queryvars+'"></iframe></div>';
		}
		else {
			stringAutoplay = autoplay ? " autoplay" : "";
			newcontent = '<div class="venoratio venoratio-' + ratio + '"><video src="' + dest + '"' + stringAutoplay + ' controls>Your browser does not support the video tag.</video></div>';
		}

This way, you are first filtering for YouTube or Vimeo, and if neither of those conditions are met, you assume that this is an HTML5 video and proceed with the markup for it. If you want to stay safe, you could also change the else above to an else if and check if either the format matches your RegEx, or if the data-vbtype attribute is video.

[nicolafranchini]

Nice, I will update the code.
By the way, that function is performed only if the data-vbtype attribute of the link is video, so we don't even need that last check.