Replace image with video in masonry image gallery, with lightbox view - SOLVED - (7.1)

I managed to get this working, here is the solution and explained to the best of my ability. I am very new to CSS and Javascript so some of the code or properties may be redundant, but it works for me on both Safari and Chrome, desktop and mobile, and videos will autoplay!

It is worth noting that this is for a Masonry styled image gallery in 7.1.

I put the following code into a code block on the same page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script> $(document).ready(function(){
    
/* APPEND VIDEO */

	/* IMAGE 1 */
	
		/* GALLERY */
	    $('<video autoplay loop muted playsinline><source src="VIDEOURL" type="video/mp4"></video>')
	    .appendTo('section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n)');
    
	    /* LIGHTBOX */
	    $('<video autoplay loop muted playsinline><source src="VIDEOURL" type="video/mp4"></video>')
	    .appendTo('[data-slide-url="LIGHTBOXURLEXT"]')
	    
	    
	/* IMAGE 2 */
	
		/* GALLERY */
	    $('<video autoplay loop muted playsinline><source src="VIDEOURL" type="video/mp4"></video>')
	    .appendTo('section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n)');
    
	    /* LIGHTBOX */
	    $('<video autoplay loop muted playsinline><source src="VIDEOURL" type="video/mp4"></video>')
	    .appendTo('[data-slide-url="LIGHTBOXURLEXT"]')
	    
	    

}); </script>


<style>

	/* IMAGE 1 */

	    /* HIDE IMAGE IN GALLERY - GET BLOCK ID AND IMAGES NUMBER IN GALLERY */
	    section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n) img {opacity: 0; z-index: 100;}

	    /* STYLE VIDEO IN GALLERY - GET BLOCK ID AND IMAGES NUMBER IN GALLERY */
	    section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n) video {display: block !important; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}
	    
	    /* STYLE VIDEO IN LIGHTBOX - GET CODE FROM URL EXTENTION IN LIGHTBOX VIEW */
		[data-slide-url="LIGHTBOXURLEXT"] video {display: block !important; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}
   
   
   /* IMAGE 2 */

	    /* HIDE IMAGE IN GALLERY - GET BLOCK ID AND IMAGES NUMBER IN GALLERY */
	    section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n) img {opacity: 0; z-index: 100;}

	    /* STYLE VIDEO IN GALLERY - GET BLOCK ID AND IMAGES NUMBER IN GALLERY */
	    section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n) video {display: block !important; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}
	    
	    /* STYLE VIDEO IN LIGHTBOX - GET CODE FROM URL EXTENTION IN LIGHTBOX VIEW */
		[data-slide-url="LIGHTBOXURLEXT"] video {display: block !important; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;}
   
   
   
</style>

To get your block ID, use this Chrome extension.

To get your Lightbox URL extension, make sure your gallery has lightbox enabled, view the image you want to replace in the lightbox / fullscreen view. You should have a string of numbers and letters show up at the end of your URL, it should look something like "?itemId=bdyjwf4fjh46g00rbsy6n1yjyxdc9b-w3d7x-lw9jy". You won't need the "?itemId=", just the numbers and letters afterwards.

"nth-child(n)" refers to the number of the image you want to target. For example, if you wanted the third image in your gallery to be changed to a video, it would need to be formatted as "nth-child(3)".

For video URL's, I know it is hard to find links to your uploaded videos to Squarespace. I am unsure on the technicalities behind it, but I believe you cannot get a single link to your uploaded video. The workaround I found, was going to Website Tools > Custom CSS > Custom Files and uploading your videos there. I suggest exporting your videos as mp4 files for this. Once they have finished uploading, you can click the video file and a URL will appear in the CSS workspace. Just copy this full URL, delete it in the CSS section, and then add it into this code. If the URL ends in ".mp4", you will need that too.

I believe this is everything you'll need to get this code working, even if you aren't well versed in coding like myself, I'm still very new to it. If you are having issues I will try to help but I may not be able to understand the issue, I apologise. 

If any experienced developers have any feedback or can help streamline this; feedback is welcome!