Video Sharing: Embedding Responsive, Auto Playing, Looping Videos as Alternate to GIFs

Hey all.

I have a number of short clips (7 to 11 seconds max) with no sound that I’d like to embed on my website. I was originally going to use GIF’s, but the file sizes are way too large because of the large resolution (1920 x 1080) and 7 to 11 seconds play time (longer than most GIFs).

The large file sizes would affect page loading so that’s why I’m opting to stream them as short clip videos instead of using GIFs

The short videos are currently hosted on both Vimeo and YouTube so I could stream from either source if I wanted to.

QUESTION:
How can I embed this on my website so that the video is responsive, autoplays, and loops? The goal is to make it so the clip is as GIF-like as possible without actually being a GIF.

A good example of this is the first visual shown on this one website page. The video autoplays, loops, and is responsive. It’s streamed from Vimeo.

So it’s definitely possible.

Unfortunately, I’m not able to find a way to do it within WebFlow, though. :man_shrugging: For example, when trying to embed from Vimeo, I made sure to select all the options that enabled the video to accomplish all three tasks within the video’s settings and share settings. But alas it still did not work. What the heck! lol

Any help would be greatly appreciated. Thanks! And if this isn’t clear enough then I’d be happy to try and elaborate even more.


Here is my site Read-Only:
https://preview.webflow.com/preview/portfolio-f9d3a3?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-f9d3a3&preview=325d9594cb61b4343296af8b798be0dd&pageId=6069e7643c6881c5c8d9ab82&mode=preview

Did you find an answer?