How to Properly Embed Videos: Responsive, Autoplay, Loop

Hey all. Just wondering if someone could help explain how one should go about embedding videos onto their websites?

I’m specifically trying to use the embed code provided from Vimeo, but no matter what I try, the video won’t implement correctly. I want the video to be (1) responsive, (2) auto play, and (3) loop.

Here’s what I’m doing:
(1) Setting up my embed parameters within Vimeo before copying the embed code (e.g. responsive, auto play, loop).
(2) Copying the code
(3) Pasting the code into my Webflow site
(4) Setting my div container holding my code to 1080 x 607.5 (width x height), which matches the page’s overall container width.
(5) Publishing the site
(6) Opening the published site and feeling frustrated. It’s not responsive, it doesn’t auto play, and for all I know it probably won’t loop. lol

See the attached screenshots, but I’m at a loss for words because I don’t know what I’m doing wrong here.

I found this helpful article on the forum, but it didn’t work for me when I tried to follow what the person did.

Any help would be GREATLY appreciated. Thanks all.


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

Response was deleted by me as was not appropriate to request

Hey thanks @Stan

I’ll give the aspect ratio setup a shot and will let you know if I have any issues.

In terms of the auto play and loop, I’d like to do this because the videos do not have sound and are short clips (7 second to 11 second clips) that were designed to function like a GIF. I chose not to create GIFs because the file size would have been too large due to the combo of the resolution (1920 x 1080) and longer than normal play time (at least in GIF terms). This would have affected page loading times. By instead creating and streaming auto playing looping video clips, I have retained image/video quality and saved space / maintained acceptable page load times.

I would think it’d be possible, at least with Vimeo hosted videos, because Vimeo even provides users with checkbox options to share videos with or without auto play and looping features.

If you have any idea how to make this work. on Webflow, please let me know!

Thanks :pray:t3:

Response was deleted by me as was not appropriate to request

Ok no problem, @Stan

Definitely open to reposting with a new title if it helps get more attention/help. I was thinking embedding responsive, autoplay, looping videos (all in my current title) was pretty much what I was asking, no? Maybe I’m missing something, though. What would you suggest?

Response was deleted by me as was not appropriate to request

It says “Embed Videos” in my title? :person_shrugging:

I’ll give it a shot, though, @Stan

Thanks again.

Response was deleted by me as was not appropriate to request