miserytakeme

If anyone is interested, I did get this to work with code but it was super long winded, overly complex and a pain to update and replicate across other pages.
I have since worked with @Beyondspace after purchasing their Lightbox Studio plugin, and due to implementing this, my code was now obsolete and stopped working. I contacted them about this, and due to my request, they implemented video natively into their plugin!
It works absolutely amazingly, and is super easy and quick to implement and update, without any complex code per page! An added bonus now is my lightboxes also have scroll zoom / pinch-to-zoom on top of video support, which is incredible and a serious game changer for me as a freelance graphic designer who often works with video and motion graphics.
It's a shame that these simple features are not natively supported within Squarespace, but their plugin adds these in and is definitely worth its (affordable) price. I urge anyone who is in a similar position to me to seriously consider this plugin and supporting this seriously talented developer! 
They actually added a case study on their site about this specifically, so if you want a deep dive into how it may help you as a videographer / 3D artist / motion designer / anyone who works with video or needs to surpass the limitations of Gif's, give it a read because it has made such a difference to my website and will improve my site's visitors experience greatly.
https://beyondspace-showcase.squarespace.com/case-studies/transforming-visual-presentation-case-study-of-misery-take-me-design

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!