Best Practice for animation/video content—designers welcome!

There are loads of problems with the current page, and after thinking about how i want to phrase my question i’ve decided to just seek general advice on best practice. I’m updating my design portfolio and have a lot of animated/video content i’d like to display—ideally as auto playing/looping content. The solution i found that maintained a decent enough level of resolution was to upload mp4s as background videos. Problems with responsivity aside, I just sent the read only link to a friend and upon loading the page up we discovered a bunch of empty black spaces where videos should be playing. Some of the smaller background videos were showing up, albeit static.

I’ve seen loads of sites that use 6mb gifs in place of video with no loading problems—but that seems completely untenable.

Where my designers attttt—has anyone had this problem and found an obvious solution that i surely must be missing??

So grateful for any help here.

Here is my public share link: LINK
(how to access public share link)